Как создать скуглённые углы
Введение
С новым CSS3 легко создать приятные глазу округлые границы. Всё что от Вас требуется - модифицировать шаблоны phpBB следуя этой инструкции:
В ней:
Не используются изображения,
HTML остаётся без изменений, а вот CSS нет,
не используется Javascript.
Грузится быстрее в современных (CSS3 совместимых) браузерах.
Минусы в том, что добавляются пустые дивы на станицу в IE, и IE7 (+) все еще нуждается в пустых изображениях.
Перво-наперво
Куда мы идем на работу? Ну, только на:
root/styles/prosilver/theme/common.css
&
root/styles/prosilver/theme/colours.css
Безумно, не так ли?
HTML
Откройте файл overall_header.html.
Ишем:
ничего, правильно, никакого HTML.
Итак продолжаем...
CSS
Открываем common.css
Ищем:
padding: 0 20px;
min-width: 650px;
Заменяем следующим:
#wrap {
padding: 12px 20px;
min-width: 650px;
width: 80%; /* This changes the width of your style to a fluid 80%. */
margin: 0 auto; /* This center aligns your wrap width on the browser page */
background-color: #FFFFFF; /* Gives the wrap a white background */
-webkit-border-radius: 6px; /* The Rounded corners for Webkit-browsers */
-moz-border-radius: 6px; /* The Rounded corners for Firefox */
}
Сохраняем и закрываем.
Теперь открываем colours.css
Ищем:
html, body {
color: #536482;
background-color: #FFFFFF;
}
Заменяем следующим:
html, body {
color: #536482;
background-color: #747474;
}
Сохраняем и закрываем.
Обновляем Вашу тему. (Заходим в админку >Стили>Темы>Prosilver>Обновить)
При необходимости, очистить кэш (на первой странице).
Если Вы всё сделали правильно результат должен быть таким:
Вариации
Изменяя разные значения, Вы можете получить разные результаты:
Вот пример:
Both radiusses: 20px - html, body background-color: #009dee;
Кроме того, Вы естественно можете менять цвет, ширину, или толщину рамки.
Я надеюсь Вам понравился этот урок и я уверен, что скоро увижу такие границы в интернете на Ваших сайтах, форумах и т. д....
|
