Боксы с простыми рамками и без оных.
Как сделать бокс с простой рамкой, без вдавливания или выпучивания? Вот такие, например:
Принцип создания такого варианта боксов аналогичен Krazy Korners только вместо 4-ступенчатой "лесенки" используется 7 ступенек.
Авторская CSS:
.xsnazzy h1, .xsnazzy h2, .xsnazzy p {
margin: 0 10px;
letter-spacing: 1px;
}
.xsnazzy h1 {
font-size: 2.5em;
color: #fc0;
}
.xsnazzy h2 {
font-size: 2em;
color: #234;
border: 0;
}
.xsnazzy p {
padding-bottom: 0.5em;
color: #eee;
}
.xsnazzy h2 {padding-top:0.5em; padding-left:10px;}
.xsnazzy {
background: transparent;
margin: 1em;
}
.xsnazzy em {
display: block;
width: 0;
height: 0;
color: #d8d8ee;
overflow: hidden;
border-top: 12px solid #fff;
border-left: 12px dotted transparent;
border-right: 12px dotted transparent;
margin-left: 50px;
}
/* hack for IE5.5 */
* html .xsnazzy em {
width: 24px;
height: 12px;
w\idth: 0;
hei\ght: 0;
}
.xsnazzy span {
display: block;
width: 0;
height: 0;
color: #fff;
overflow: hidden;
border-top: 10px solid #7f7f9c;
border-left: 10px dotted transparent;
border-right: 10px dotted transparent;
margin-left: 52px;
margin-top: -15px;
}
* html .xsnazzy span {
width: 20px;
height: 10px;
w\idth: 0;
hei\ght: 0;
}
.xb1, .xb2, .xb3, .xb4, .xb5, .xb6, .xb7 {
display: block;
overflow: hidden;
font-size: 0;
}
.xb1, .xb2, .xb3, .xb4, .xb5, .xb6 {
height: 1px;
}
.xb4, .xb5, .xb6, .xb7 {
background: #ccc;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
}
.xb1 {
margin: 0 8px;
background: #fff;
}
.xb2 {
margin: 0 6px;
background: #fff;
}
.xb3 {
margin: 0 4px;
background: #fff;
}
.xb4 {
margin: 0 3px;
background: #7f7f9c;
border-width: 0 5px;
}
.xb5 {
margin: 0 2px;
background: #7f7f9c;
border-width: 0 4px;
}
.xb6 {
margin: 0 2px;
background: #7f7f9c;
border-width: 0 3px;
}
.xb7 {
margin: 0 1px;
background: #7f7f9c;
border-width: 0 3px;
height: 2px;
}
.xboxcontent {
display: block;
background: #7f7f9c;
border: 3px solid #fff;
border-width: 0 3px;
}
А это наш HTML, рисующий верхний бокс:
<div class="xsnazzy">
<b class="xb1"></b><b class="xb2"></b><b class="xb3"></b>
<b class="xb4"></b><b class="xb5"></b><b class="xb6"></b>
<b class="xb7"></b>
<div class="xboxcontent">
<h1>БОКС С РАМКОЙ</h1>
<h2>3 pixel-ные рамки без картинок</h2>
<p>
Бокс со скругленными углами и рамкой
Бокс со скругленными углами и рамкой
Бокс со скругленными углами и рамкой
Бокс со скругленными углами и рамкой
Бокс со скругленными углами и рамкой
</p>
<p>
Бокс со скругленными углами и рамкой
Бокс со скругленными углами и рамкой
Бокс со скругленными углами и рамкой
Бокс со скругленными углами и рамкой
Бокс со скругленными углами и рамкой
</p>
</div>
<b class="xb7"></b><b class="xb6"></b><b class="xb5"></b>
<b class="xb4"></b><b class="xb3"></b><b class="xb2"></b>
<b class="xb1"></b>
</div>
А как нам получить нижний бокс, но без рамки? Да ещё другого цвета? В приведенной CSS заложены "чисто конкретные" цвета, неужели придется практически дублировать таблицу стилей ради другого цвета? Разумеется, нет.
Мы будем использовать возможности переопределения свойств. Создадим дополнительные описания классов, например:
.green{background:#008000; border-color:#008000;}
.green_red{background:#008000; border-color:#FF4500;}
.red{background:#FF4500; border-color:#FF4500;}
.gray{background:#666; border-color:#666;}
А теперь воспользуемся редко применяемым правилом XHTML - зададим несколько значений для атрибута class:
<div class="xsnazzy">
<b class="xb1 red"></b><b class="xb2 red"></b>
<b class="xb3 red"></b><b class="xb4 red"></b>
<b class="xb5 red"></b><b class="xb6 red"></b>
<b class="xb7 red"></b>
<div class="xboxcontent red">
<h1>БОКС БЕЗ РАМКИ</h1>
<h2>3 pixel-ные рамки без картинок</h2>
<p>
Бокс без рамки Бокс без рамки
Бокс без рамки Бокс без рамки
Бокс без рамки Бокс без рамки
Бокс без рамки Бокс без рамки
</p>
</div>
<b class="xb7 red"></b><b class="xb6 red"></b>
<b class="xb5 red"></b><b class="xb4 red"></b>
<b class="xb3 red"></b><b class="xb2 red"></b>
<b class="xb1 red"></b>
</div>
Обратите внимание - вместо class="xb1" мы написали class="xb1 red" и так во всех тегах. Тем самым мы дали команду применить к элементам класса xb1 еще и атрибуты класса red - то есть красный цвет.
В результате мы нарисовали средний бокс красного цвета без рамок.
А если нам понадобится ещё какое-то сочетание, как на нижнем боксе ("дурак любит красное да зеленое"), мы сделаем так:
<div class="xsnazzy">
<b class="xb1 red"></b><b class="xb2 red"></b>
<b class="xb3 red"></b><b class="xb4 red"></b>
<b class="xb5 green_red"></b><b class="xb6 green_red"></b>
<b class="xb7 green_red"></b>
<div class="xboxcontent green_red">
<h1>БОКС БЕЗ РАМКИ</h1>
<h2>3 pixel-ные рамки без картинок</h2>
<p>
Бокс без рамки Бокс без рамки
Бокс без рамки Бокс без рамки
Бокс без рамки Бокс без рамки
Бокс без рамки Бокс без рамки
</p>
</div>
<b class="xb7 green_red"></b><b class="xb6 green_red"></b>
<b class="xb5 green_red"></b>
<b class="xb4 red"></b><b class="xb3 red"></b>
<b class="xb2 red"></b><b class="xb1 red"></b>
</div>
Прячем код в чанки.
X_BOX_START
<div class="xsnazzy">
<b class="xb1"></b>
<b class="xb2"></b>
<b class="xb3"></b>
<b class="xb4"></b>
<b class="xb5"></b>
<b class="xb6"></b>
<b class="xb7"></b>
<div class="xboxcontent">
X_BOX_END
</div>
<b class="xb7"></b>
<b class="xb6"></b>
<b class="xb5"></b>
<b class="xb4"></b>
<b class="xb3"></b>
<b class="xb2"></b>
<b class="xb1"></b>
</div>
Код HTML будет выглядеть так:
{ {X_BOX_START} }
<h1>Пример бокса</h1>
<p>Это пример бокса в контенте
Это пример бокса в контенте
Это пример бокса в контенте
Это пример бокса в контенте
</p>
{ {X_BOX_END} }
Различные цвета
Конечно, нам захочется иметь различные цвета боксов - и основной части и рамки. Тут важно соблюсти меру - не заводить слишком много вариантов. В качестве основного варианта надо установить цвета в CSS, а для дополнительных вариантов - сделать чанки, например:
X_BOX_START, X_BOX_END - базовый цвет с рамкой
X_BOX_START_LIGHT, X_BOX_END_LIGHT - "легкий" цвет с рамкой
X_BOX_START_DARK_SOLID, X_BOX_END_DARK_SOLID - "темный" цвет без рамки и так далее.
Цвет задавать в виде второго аргумента класса в чанке.
Распределение CSS по файлам
Разумеется, определения CSS можно подгружать в страницу в обычном порядке. Но вот у нас для модели сайта используется несколько вариантов общей цветовой гаммы - серая, зеленая и коричневая (названия условные). Для мгновенной смены дизайна сайта достаточно изменить в одном чанке вызов главной таблицы стилей: Например,
<link
href="assets/templates/site/css/site_brown.css"
rel="stylesheet" type="text/css" />
изменить на
<link
href="assets/templates/site/css/site_green.css"
rel="stylesheet" type="text/css" />
Чтобы обеспечить такую возможность у нас хитро раскиданы таблицы стилей. Допустим, главным у нас является файл
assets/templates/site/css/site_brown.css такого содержания:
@charset "utf-8"; @import url(common/common.css); @import url(color/brown/fonts.css); @import url(color/brown/images.css); @import url(color/brown/borders.css); @import url(color/brown/snippets/ditto.css); @import url(color/brown/snippets/fd.css); @import url(color/brown/snippets/list_sitemap.css); @import url(color/brown/snippets/mx_ajax_search.css); @import url(color/brown/snippets/molio_nav_main.css); @import url(color/brown/snippets/wf_nav_vert.css); @import url(color/brown/colors.css);
Все, относящееся к цвету, мы запишем в assets/templates/site/css/color/brown/colors.css, причем группируя свойства:
.raised .b2, .raised .b3, .raised .b4,
.raised .b4b, .raised .b3b, .raised .b2b ,
.raised .boxcontent {
background: #FAEBD7;
}
.inset .b2, .inset .b3, .inset .b4,
.inset .b4b, .inset .b3b, .inset .b2b ,
.inset .boxcontent {
background: #FFDEAD;
}
.xb4, .xb5, .xb6, .xb7 {
background: #FFDEAD;
border-right: 1px solid #FFA500;
border-left: 1px solid #FFA500;
border-color: #FFA500;
}
.xb1, .xb2, .xb3 {
background: #FFA500;
}
.xb4, .xb5, .xb6, .xb7, .xboxcontent {
background: #FFDEAD;
}
.xboxcontent {
border: 3px solid #FFA500;
border-width: 0 3px;
}
.x_green_red{
background: #008000;
border-color: #FF4500;
}
.x_red{
background: #FF4500;
border-color: #FF4500;
}
.x_gray{
background: #666;
border-color: #666;
}
Все прочие свойства запишем в файл assets/templates/site/css/common/screen/rb_ccplay.css
.raised,.inset {
background: transparent;
margin: 5px auto;
}
.raised h1, .raised h2, .raised h3, .raised h4,
.raised h5, .raised h6, .raised p,
.inset h1, .inset h2,.inset h3,.inset h4,
.inset h5,.inset h6, .inset p{
margin: 0 10px;
}
.raised .top, .raised .bottom,
.inset .top, .inset .bottom
{
display: block;
background: transparent;
font-size: 1px;
}
.raised .b1, .raised .b2, .raised .b3, .raised .b4,
.raised .b1b, .raised .b2b, .raised .b3b, .raised .b4b,
.inset .b1, .inset .b2, .inset .b3, .inset .b4,
.inset .b1b, .inset .b2b, .inset .b3b, .inset .b4b
{
display: block;
overflow: hidden;
}
.raised .b1, .raised .b2, .raised .b3, .raised .b1b,
.raised .b2b, .raised .b3b,
.inset .b1, .inset .b2, .inset .b3, .inset .b1b,
.inset .b2b, .inset .b3b {
height: 1px;
}
.raised .b2 {
border-left: 1px solid #fff;
border-right: 1px solid #eee;
}
.raised .b3 {
border-left: 1px solid #fff;
border-right: 1px solid #ddd;
}
.raised .b4 {
border-left: 1px solid #fff;
border-right: 1px solid #aaa;
}
.raised .b4b {
border-left: 1px solid #eee;
border-right: 1px solid #999;
}
.raised .b3b {
border-left: 1px solid #ddd;
border-right: 1px solid #999;
}
.raised .b2b {
border-left: 1px solid #aaa;
border-right: 1px solid #999;
}
.raised .b1 {
margin: 0 5px;
background: #fff;
}
.raised .b2, .raised .b2b,
.inset .b2, .inset .b2b
{
margin: 0 3px;
border-width: 0 2px;
}
.raised .b3, .raised .b3b,
.inset .b3, .inset .b3b
{
margin: 0 2px;
}
.raised .b4, .raised .b4b,
.inset .b4, .inset .b4b
{
height: 2px;
margin: 0 1px;
}
.raised .b1b {
margin: 0 5px;
background: #999;
}
.raised .boxcontent {
display: block;
border-left: 1px solid #fff;
border-right: 1px solid #999;
}
.inset .b2 {
border-left: 1px solid #999;
border-right: 1px solid #aaa;
}
.inset .b3 {
border-left: 1px solid #999;
border-right: 1px solid #ddd;
}
.inset .b4 {
border-left: 1px solid #999;
border-right: 1px solid #eee;
}
.inset .b4b {
border-left: 1px solid #aaa;
border-right: 1px solid #fff;
}
.inset .b3b {
border-left: 1px solid #ddd;
border-right: 1px solid #fff;
}
.inset .b2b {
border-left: 1px solid #eee;
border-right: 1px solid #fff;
}
.inset .b1 {
margin: 0 5px;
background: #999;
}
.inset .b3, .inset .b3b {margin:0 2px;}
.inset .b4, .inset .b4b {height:2px; margin:0 1px;}
.inset .b1b {
margin: 0 5px;
background: #fff;
}
.inset .boxcontent {
display: block;
border-left: 1px solid #999;
border-right: 1px solid #fff;
}
.xsnazzy h1, .xsnazzy h2, .xsnazzy p {
margin: 0 10px;
letter-spacing: 1px;
}
.xsnazzy p {
padding-bottom: 0.5em;
}
.xsnazzy {
background: transparent;
margin: 1em;
}
.xsnazzy em {
display: block;
width: 0;
height: 0;
color: #d8d8ee;
overflow: hidden;
border-top: 12px solid #fff;
border-left: 12px dotted transparent;
border-right: 12px dotted transparent;
margin-left: 50px;
}
.xb1, .xb2, .xb3, .xb4, .xb5, .xb6, .xb7 {
display: block;
overflow: hidden;
font-size: 0;
}
.xb1, .xb2, .xb3, .xb4, .xb5, .xb6 {
height: 1px;
}
.xb1 {
margin: 0 8px;
}
.xb2 {
margin: 0 6px;
}
.xb3 {
margin: 0 4px;
}
.xb4 {
margin: 0 3px;
border-width: 0 5px;
}
.xb5 {
margin: 0 2px;
border-width: 0 4px;
}
.xb6 {
margin: 0 2px;
border-width: 0 3px;
}
.xb7 {
margin: 0 1px;
border-width: 0 3px;
height: 2px;
}
.xboxcontent {
display: block;
border-width: 0 3px;
}
И в главном файле запишем
@import url(color/brown/colors.css);
@import url(common/screen/rb_ccplay.css);
Причем вызов rb_ccplay.css непременно после вызова colors.css!
Теперь, для настройки цвета, например для "зеленой" палитры сайта мы должны скопировать из
assets/templates/site/css/color/brown/colors.css в
assets/templates/site/css/color/green/colors.css необходимые строки и изменить настройки цветов.
Это позволит использовать, при необходимости, разные способы скругления уголков.
Но и это ещё не всё. Самые интересные варианты уголков ещё впереди...
Написать комментарий