Разберемся с "трехмерными" боксами. Вот два варианта:
На скриншоте показаны выпуклый и вдавленный боксы со скругленными уголками. Скругление уголков выполняется только с использованием CSS, при этом предусмотрено и сглаживание за счет цветовых переходов:
Для получения эффекта выпуклого бокса используется CSS:
.raised {
background: transparent;
margin: 0 auto;
width: 90%;
}
.raised .b1 {
background: #fff;
margin: 0 5px;
}
.raised .b1, .raised .b2,
.raised .b3, .raised .b1b,
.raised .b2b, .raised .b3b {
height: 1px;
}
.raised .b1, .raised .b2,
.raised .b3, .raised .b4,
.raised .b1b, .raised .b2b,
.raised .b3b, .raised .b4b {
display: block;
overflow: hidden;
}
.raised .b1b {
background: #999;
margin: 0 5px;
}
.raised .b2 {
background: #FAEBD7;
border-left: 1px solid #fff;
border-right: 1px solid #eee;
}
.raised .b2, .raised .b2b {
border-width: 0 2px;
margin: 0 3px;
}
.raised .b2b {
background: #FAEBD7;
border-left: 1px solid #aaa;
border-right: 1px solid #999;
}
.raised .b3 {
background: #FAEBD7;
border-left: 1px solid #fff;
border-right: 1px solid #ddd;
}
.raised .b3, .raised .b3b {
margin: 0 2px;
}
.raised .b3b {
background: #FAEBD7;
border-left: 1px solid #ddd;
border-right: 1px solid #999;
}
.raised .b4 {
background: #FAEBD7;
border-left: 1px solid #fff;
border-right: 1px solid #aaa;
}
.raised .b4, .raised .b4b {
height: 2px;
margin: 0 1px;
}
.raised .b4b {
background: #FAEBD7;
border-left: 1px solid #eee;
border-right: 1px solid #999;
}
.raised .boxcontent {
background: #FAEBD7;
border-left: 1px solid #fff;
border-right: 1px solid #999;
display: block;
}
.raised .top, .raised .bottom {
background: transparent;
display: block;
font-size: 1px;
}
.raised h1 {
color: #FF7F50;
font-size: 2em;
letter-spacing: 1px;
}
.raised h1, .raised p {
margin: 0 10px;
}
.raised p {
padding-bottom: 0.5em;
}
Для получения эффекта вдавленного бокса используется CSS:
.inset {
background: transparent;
margin: 0 auto;
width: 90%;
}
.inset .b1 {
background: #999;
margin: 0 5px;
}
.inset .b1, .inset .b2,
.inset .b3, .inset .b1b,
.inset .b2b, .inset .b3b {
height: 1px;
}
.inset .b1, .inset .b2,
.inset .b3, .inset .b4,
.inset .b1b, .inset .b2b,
.inset .b3b, .inset .b4b {
display: block;
overflow: hidden;
}
.inset .b1b {
background: #fff;
margin: 0 5px;
}
.inset .b2 {
background: #DEB887;
border-left: 1px solid #999;
border-right: 1px solid #aaa;
}
.inset .b2, .inset .b2b {
border-width: 0 2px;
margin: 0 3px;
}
.inset .b2b {
background: #DEB887;
border-left: 1px solid #eee;
border-right: 1px solid #fff;
}
.inset .b3 {
background: #DEB887;
border-left: 1px solid #999;
border-right: 1px solid #ddd;
}
.inset .b3, .inset .b3b {
margin: 0 2px;
}
.inset .b3b {
background: #DEB887;
border-left: 1px solid #ddd;
border-right: 1px solid #fff;
}
.inset .b4 {
background: #DEB887;
border-left: 1px solid #999;
border-right: 1px solid #eee;
}
.inset .b4, .inset .b4b {
height: 2px;
margin: 0 1px;
}
.inset .b4b {
background: #DEB887;
border-left: 1px solid #aaa;
border-right: 1px solid #fff;
}
.inset .boxcontent {
background: #DEB887;
border-left: 1px solid #999;
border-right: 1px solid #fff;
display: block;
}
.inset .top, .inset .bottom {
background: transparent;
display: block;
font-size: 1px;
}
.inset h1 {
color: #fff;
font-size: 2em;
letter-spacing: 1px;
}
.inset h1, .inset p {
margin: 0 10px;
}
.inset p {
padding-bottom: 0.5em;
}
Атрибуты фонового цвета для вдавленного бокса мы задали темнее, чем для выпуклого.
Как это использовать в HTML
Приведем код, формирующий боксы, показанные на иллюстрации:
<div class="raised">
<b class="top"><b class="b1"></b><b class="b2"></b>
<b class="b3"></b><b class="b4"></b></b>
<div class="boxcontent">
<h1>3D Raised</h1>
<p>
Выпуклый бокс со скругленными углами
Выпуклый бокс со скругленными углами
Выпуклый бокс со скругленными углами
Выпуклый бокс со скругленными углами
Выпуклый бокс со скругленными углами
Выпуклый бокс со скругленными углами
Выпуклый бокс со скругленными углами
</p>
<div class="inset">
<b class="top"><b class="b1"></b><b class="b2"></b>
<b class="b3"></b><b class="b4"></b></b>
<div class="boxcontent">
<h1>3D Inset</h1>
<p>
Вдавленный бокс со скругленными углами
Вдавленный бокс со скругленными углами
Вдавленный бокс со скругленными углами
</p>
</div>
<b class="bottom"><b class="b4b"></b><b class="b3b"></b>
<b class="b2b"></b><b class="b1b"></b></b>
</div>
<p>
Выпуклый бокс со скругленными углами
Выпуклый бокс со скругленными углами
Выпуклый бокс со скругленными углами
Выпуклый бокс со скругленными углами
Выпуклый бокс со скругленными углами
Выпуклый бокс со скругленными углами
Выпуклый бокс со скругленными углами
</p>
</div>
<b class="bottom"><b class="b4b"></b><b class="b3b"></b>
<b class="b2b"></b><b class="b1b"></b></b>
</div>
<div class="inset">
<b class="top"><b class="b1"></b><b class="b2"></b>
<b class="b3"></b><b class="b4"></b></b>
<div class="boxcontent">
<h1>3D Inset</h1>
<p>
Вдавленный бокс со скругленными углами
Вдавленный бокс со скругленными углами
Вдавленный бокс со скругленными углами
</p>
</div>
<b class="bottom"><b class="b4b"></b><b class="b3b"></b>
<b class="b2b"></b><b class="b1b"></b></b>
</div>
В этом коде довольно много повторяющихся фрагментов и каждый раз вписывать их в код страницы будет очень неудобно. Для работы в MODx мы спрячем повторяющиеся коды HTML в чанки.
Чанк RB_RAISED_01 (начало выпуклого бокса):
<div class="raised">
<b class="top"><b class="b1"></b><b class="b2"></b>
<b class="b3"></b><b class="b4"></b></b>
<div class="boxcontent">
Чанк RB_RAISED_02 (конец выпуклого бокса):
</div>
<b class="bottom"><b class="b4b"></b><b class="b3b"></b>
<b class="b2b"></b><b class="b1b"></b></b
</div>
Чанк RB_INSET_01 (начало вдавленного бокса):
<div class="inset">
<b class="top"><b class="b1"></b><b class="b2"></b>
<b class="b3"></b><b class="b4"></b></b>
<div class="boxcontent">
Чанк RB_INSET_02 (конец вдавленного бокса):
</div>
<b class="bottom"><b class="b4b"></b><b class="b3b"></b>
<b class="b2b"></b><b class="b1b"></b></b>
</div>
Мы видим, что концовки и выпуклого и вдавленного бокса одинаковые, а начала отличаются только классами "raised" или "inset".
Наверное, стоит вынести начало за пределы чанка, и сделать только два одинаковых чанка для обеих видов боксов
Чанк RB_START (начало бокса):
<b class="top"><b class="b1"></b><b class="b2"></b>
<b class="b3"></b><b class="b4"></b></b>
<div class="boxcontent">
Чанк RB_END (конец бокса):
</div>
<b class="bottom"><b class="b4b"></b><b class="b3b"></b>
<b class="b2b"></b><b class="b1b"></b></b>
Тогда код HTML в MODx будет иметь вид:
<div class="raised">
{ { RB_START } }
<h1>3D Raised</h1>
<p>Выпуклый бокс со скругленными углами
Выпуклый бокс со скругленными углами
Выпуклый бокс со скругленными углами
Выпуклый бокс со скругленными углами
Выпуклый бокс со скругленными углами
Выпуклый бокс со скругленными углами
Выпуклый бокс со скругленными углами
</p>
<div class="inset">
{ {RB_START} }
<h1>3D Inset</h1>
<p>Вдавленный бокс со скругленными углами
Вдавленный бокс со скругленными углами
Вдавленный бокс со скругленными углами </p>
{ {RB_END} }
</div>
<p>Выпуклый бокс со скругленными углами
Выпуклый бокс со скругленными углами
Выпуклый бокс со скругленными углами
Выпуклый бокс со скругленными углами
Выпуклый бокс со скругленными углами
Выпуклый бокс со скругленными углами
Выпуклый бокс со скругленными углами
</p>
{ {RB_END} }
</div>
<div class="inset">
{ {RB_START} }
<h1>3D Inset</h1>
<p>Вдавленный бокс со скругленными углами
Вдавленный бокс со скругленными углами
Вдавленный бокс со скругленными углами </p>
{ {RB_END} }
</div>
Мы видим, что код стал более структурированным. Мы его можем ещё упростить за счет создания чанков.
Чанк RB_START_INSET (начало вдавленного бокса):
<div class="inset">
{ {RB_START} }
Чанк RB_START_RAISED (начало вдавленного бокса):
<div class="raised">
{ {RB_START} }
Чанк RB_END (конец бокса):
</div>
<b class="bottom"><b class="b4b"></b><b class="b3b"></b>
<b class="b2b"></b><b class="b1b"></b></b>
</div>
Код HTML будет:
{ {RB_START_RAISED} }
<h1>3D Raised</h1>
<p>Выпуклый бокс со скругленными углами</p>
{ {RB_START_INSET} }
<h1>3D Inset</h1>
<p>Вдавленный бокс со скругленными углами</p>
{ {RB_END} }
<p>Выпуклый бокс со скругленными углами</p>
{ {RB_END} }
{ {RB_START_INSET} }
<h1>3D Inset</h1>
<p>Вдавленный бокс со скругленными углами</p>
{ {RB_END} }
В этом примере код всключает три бокса, причем один в другом. А в простых случаях, когда используется один бокс без вложений, код будет проще:
{ {RB_START_RAISED} }
<p>Здесь можно написать любой текст </p>
{ {RB_END} }
или
{ {RB_START_INSET} }
<p>Здесь можно написать любой текст </p>
{ {RB_END} }
Замечание. Если бы мы не использовали MODx, мы бы, возможно, вынесли формирование кода уголков в JavaScript. Здесь мы применили вложенные чанки.
Это дает дополнительные возможности - мы можем переопределить чанки и уголки будут рисоваться совсем иначе, возможно совсем иным методом.
Для сокращения объема страницы мы не стали останавливаться на некоторых деталях:
1. Сокращение объема CSS за счет группировок.
2. Разделение CSS по отдельным файлам для быстрого изменения цветов боксов.
Эти вопросы мы разберем на примере других способов.
А пока передохнем, начнем новую страницу, и продолжим разборку...
Написать комментарий