Создание простой css обвязки блока.
Описание:
В этой статье речь пойдет о создании обвязки боксов с закругленными углами с помощью
css. В качестве обвзяки будет выступать фоновое изображение:
Шаг 1
В первую очередь, для создания
css обвязки нам потребуется вырезать необходимые части изображения с помощью photoshop. Вот необходимые изображения для создания
css обвязки:
| Для создания верхней стороны обвязки |
| Для создания нижней стороны обвязки |
| Для создания левой стороны обвязки |
| Для создания правой стороны обвязки |
| Для создания левого верхнего угла обвязки |
| Для создания правого верхнего угла обвязки |
| Для создания левого нижнего угла обвязки |
| Для создания правого нижнего угла обвязки |
Шаг 2
Далее нужно с помощью css определить стили для будущей обвязки.
- класс side_left - задает изображение для левой стороны обвязки и цвет заливки бокса.
- класс side_right - задает изображение для правой стороны обвязки.
- класс side_top - задает изображение для верхней стороны обвязки.
- класс side_bot - задает изображение для нижней стороны обвязки.
- класс left_top - задает изображение для левого верхнего угла обвязки.
- класс right_top - задает изображение для правого верхнего угла обвязки.
- класс left_bot - задает изображение для левого нижнего угла обвязки.
- класс right_bot - задает изображение для правого нижнего угла обвязки.
Синтаксис:
.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;
}
.side_top {
background:url('/images/side_top.gif') left top repeat-x;
}
.side_bot {
background:url('/images/side_bot.gif') left bottom repeat-x;
}
.left_top {
background:url('/images/left_top.gif') left top no-repeat;
}
.right_top {
background:url('/images/right_top.gif') right top no-repeat;
}
.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%;
}
Шаг 3
Создание html разметки для обвязки. Так как обвязка в этом случае состоит из 8 слоев, нужно создать вложенность из 8 блочных элементов, лучше всего использовать тег
div для этого.
Листинг index.html: <!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns=
"http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv=
"Content-Type" content="text/html; charset=windows-1251" />
<title>
Создание обвязки бокса из 8 слоев.</title>
</head>
<body>
<div class=
"side_left">
<div class=
"side_right">
<div class=
"side_top">
<div class=
"side_bot">
<div class=
"left_top">
<div class=
"right_top">
<div class=
"left_bot">
<div class=
"right_bot">
Error sit voluptatem assusantium doloremque
laudantium, totam rem aperiam eaque ipsa quae
ab illo inventore </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Результат: Error sit voluptatem assusantium doloremque
laudantium, totam rem aperiam eaque ipsa quae
ab illo inventore
Примечания:
- Обязательным является указанием ширины равной 100% последнего элемента вложенности для предотвраящения багов в браузере IE.
- Если в качестве заливки должен использоватся не цвет, а изображение, то необходимо использовать вложенность из 9 элементов и в самом верхнем элементе указать изображение для заливки.
- Для создания css обвязки можно использовать 4 слоя если цвет границ и заливки совпадает.
Выводы:
Данный способ является, наверно, самым простым и оптимальным для создания обвязки из 4 и 8 (9) слоев. Если заливка вне блока однородная (цвет или фоновое изображение без резких изменений цветовой гаммы).
Добавить комментарий
Комментарии
у меня текст хоть и лежит между однако почему то никак не хочет находиться внутри блока… он будто НА нем.. Ответить | Ответить с цитатой | Цитировать
- Если честно, то не понял вопроса, что значит "текст лежит между"? между дивами?
Ответить | Ответить с цитатой | ЦитироватьНо вопрос уже отпал, нашел свою ошибку
Благодарю что все-же ответили:) Ответить | Ответить с цитатой | Цитировать
RSS лента комментариев этой записи.