Создание css обвязки блока на градиентном фоне.
Описание:
В этой статье речь пойдет о создании обвязки боксов с закругленными углами с помощью
css на градиентном фоне. В качестве обвзяки будет выступать фоновое изображение на градиентном фоне:
В данном случае создание простой css обвязки (8 слоев) невозможно, так как в результате мы получим следующий результат:
Error sit voluptatem assusantium doloremque
laudantium, totam rem aperiam eaque ipsa quae
ab illo inventore
Как видно на этом примере, цвет внешней стороны угловых картинок отличается от общего градиентного фона. Можно сделать вывод что нам необходимо создать такую обвязку, чтоб внешний цвет угловых картинок был прозрачным...
Шаг 1
В первую очередь, для создания
css обвязки на градиентном фоне нам потребуется вырезать необходимые части изображения с помощью photoshop, причем в угловых изображениях внешнюю сторону сделать прозрачной:
Вот необходимые изображения для создания
css обвязки:
| Для создания верхней стороны обвязки |
| Для создания нижней стороны обвязки |
| Для создания левой стороны обвязки |
| Для создания правой стороны обвязки |
| Для создания левого верхнего угла обвязки |
| Для создания правого верхнего угла обвязки |
| Для создания левого нижнего угла обвязки |
| Для создания правого нижнего угла обвязки |
Шаг 2
Далее нужно с помощью css определить стили для будущей обвязки. Важным элементов этих стилей является:
margin - используется для задания отступов верхней и нижней сторон обвязки от углов, что позволяет использовать прозрачность в углах.
font-size:0; line-height:0px; - используется исключительно для браузера IE, так как данный браузер создает дополнительные вертикальные отступы если у блочного элемента явно задана высота и она меньше используемых размеров шрифта и межстрочного растояния.
- класс side_left - задает изображение для левой стороны обвязки и цвет заливки бокса.
- класс side_right - задает изображение для правой стороны обвязки.
- класс side_top - задает изображение для верхней стороны обвязки.
- класс side_bot - задает изображение для нижней стороны обвязки.
- класс left_top - задает изображение для левого верхнего угла обвязки.
- класс right_top - задает изображение для правого верхнего угла обвязки.
- класс left_bot - задает изображение для левого нижнего угла обвязки.
- класс right_bot - задает изображение для правого нижнего угла обвязки.
Синтаксис:
.left_top {
background:url('/images/left_top.gif') left top no-repeat;
}
.right_top {
background:url('/images/right_top.gif') right top no-repeat; width:100%;
}
.side_top {
background:url('/images/side_top.gif') left top repeat-x; margin: 0 8px 0 8px; height:8px;
}
.left_bot {
background:url('/images/left_bot.gif') left bottom no-repeat;
}
.right_bot {
background:url('/images/right_bot.gif') right bottom no-repeat; width:100%;
}
.side_bot {
background:url('/images/side_bot.gif') left bottom repeat-x; margin: 0 8px 0 8px; height:8px;
}
.side_left {
background:url('/images/side_left.gif') left top repeat-y #F2A229;
}
.side_right {
background:url('/images/side_right.gif') right top repeat-y;
}
Шаг 3
Создание html разметки для обвязки. Для создания обвязки на градиентном фоне нужно использовать двойную вложенность блочных элементов для шапки и подвала обвязки и одинарную вложенность для конента.
<div class=
"left_top">
<div class=
"right_top">
<div class=
"side_top"></div>
</div>
</div>
<div class=
"side_left">
<div class=
"side_right">
Error sit voluptatem assusantium doloremque
laudantium, totam rem aperiam eaque ipsa quae ab illo inventore
</div>
</div>
<div class=
"left_bot">
<div class=
"right_bot">
<div class=
"side_bot"></div>
</div>
</div>
Результат: Error sit voluptatem assusantium doloremque
laudantium, totam rem aperiam eaque ipsa quae
ab illo inventore
Выводы:
Данный способ является, наверно, самым простым и оптимальным для создания обвязки на градиентном фоне. Существуем много различных способов, но этот отличается своей простотой и кроссбраузерностью
Добавить комментарий
