WEBduty.ru css html javascript jquery

CSS3 – Часть 2: Границы

Статья от 26.06.09 в категории CSS3
Теги: borders, CSS3, бордеры, границы

Это второй пост из серии статей, посвящённых CSS3. В данной статье мы будем рассматривать границы. Каждый, кто использует CSS, знаком со свойствами бордеров. Их использование – это отличный способ структурировать контент страницы, создать эффекты вокруг изображений и т.п.

CSS3 поднимает бордеры на качественно новый уровень с возможностью использовать градиенты, скруглённые углы, тени и бордеры состоящие из изображений. Рассмотрим все эти усовершенствования более детально, с использованием примеров, где это возможно.

Скругление границ

Достижение скругления углов с использованием “классического” CSS достаточно сложно – для этого обычно используются изображения каждого из углов. Используя CSS3, сверстать скруглённые углы очень просто. Достаточно лишь использовать нужное CSS-свойство. Скругление может применяться к каждому углу отдельно, радиус скругления, цвет легко изменяются.
Пример:

.border_rounded {
background-color: #ddccb5;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid #897048;
padding: 10px;
width: 310px;
}

Градиенты

Использование градиентов в бордерах может быть эффективным, если использовать их правильно. Но CSS код здесь усложняется тем, что требудется определить каждый цвет градиента:

.border_gradient {
border: 8px solid #000;
-moz-border-bottom-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b 
                                      #d4c5ae #e2d6c4 #eae1d2;
-moz-border-top-colors:  #897048 #917953 #a18a66 #b6a488 #c5b59b 
                                   #d4c5ae #e2d6c4 #eae1d2;
-moz-border-left-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b 
                                  #d4c5ae #e2d6c4 #eae1d2;
-moz-border-right-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b 
                                  #d4c5ae #e2d6c4 #eae1d2;
padding: 5px 5px 5px 15px;
width: 300px;
}

Тени

В настоящее время тени – один из “трудноверстаемых” элементов страницы. В CSS3 всё гораздо проще:

.border_shadow {
-webkit-box-shadow: 10px 10px 5px #888;
padding: 5px 5px 5px 15px;
width: 300px;
}

Изображения

Границы состоящие из изображений – одно из самых полезных свойств CSS3. Многие элементы дизайна верстаются гораздо проще с помощью этого метода. В CSS3 есть возможность растянуть изображение в бордере, повторять его и т.п.
CSS код:

.border_image {
-webkit-border-image: url(border.png) 27 27 27 27 round round;
}

В заключение

Это революция бордеров! Эти CSS3 свойства съэкономят немало времени веб-мастера. Они в значительной степени упрощают верстку многих элементов дизайна.
В следующей статье я расскажу про текстовые эффекты.

Подпишись на обновления

Если вам понравилась статья, подпишитесь на обновления через RSS (?), чтобы не пропустить новые интересные статьи. Также Вы можете зафолловить меня в Twitter или подписаться на обновления по email.

Закладки

Похожие статьи:

• CSS Оптимизатор
• CSS3 – Часть 1: Обзор
• CSS3 – Часть 3: Текстовые эффекты
• Обзор CSS библиотек.
• 5 способов оптимизации CSS