Ниже я покажу вам пять вариантов рамок "Krazy Korners". Они унивесальны, и не зависят от размеров окна вашего браузера и контента. Основная идея метода состоит в разработке углов, используя четыре или пять пикселов верхних полос перед главным слоем с контентом и после него.
Каждая полоса использует основной цвет, цвет левой и правой границы и левый и правый отступы. На рисунке ниже показано, как это организовано:



Основной кривой угол состоит из полос b1, b2, b3, b4, и в примере выше основной цвет - бледное золото, цвет границ полос - белый, и внешний второстепенный цвет фона - серый. Метод Krazy Korners работает лучше всего с пастельными цветами. Яркие цвета создают более зубчатую картину.

Пример 1. "Обратные кривые"

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



b1 - верхняя линия, толщиной 1px с белым фоном и левым/правым отступом толщиной 4px.
b2 – вторая с верху линия, толщиной 2px с бледным золотым фоном, левая/правая граница толщиной 1px белого цвета, левый/правый отступ толщиной 4px.
b3 – третья сверху линия, толщиной 1px с бледным золотым фоном, левая/правая граница толщиной 1px белого цвета и левый/правый отступ толщиной 3px.
b4 – четвертая сверху линия, толщиной 1px с бледным золотым фоном, левая/правая граница толщиной 3px белого цвета без отступа по краям.
Слой с контентом - бледный золотой фон и левая/правая граница толщиной 1px белого цвета.

HTML код:

<div class="curved"> <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b> <div class="boxcontent"> <h1>Пример 1</h1> <p>"Обратные кривые"</p> </div> <b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b> </div>

Эти примеры созданы, используя <b> и </b> тэги.
<b> тэги использовались, потому что их быстрее печатать ( :) ) чем <span></span> и занять меньше места на диске (столь же хорошая причина как первая).

CSS для этого примера следующий:

.curved { background: transparent; width:40%; } .curved h1, .curved p { margin:0 10px; } .curved h1 { font-size:2em; color:#fff; } .curved p { padding-bottom:0.5em; } .curved .b1 { display:block; overflow:hidden; height:1px; margin:0 4px; background:#fff; font-size:1px; } .curved .b2 { display:block; overflow:hidden; height:1px; margin:0 4px; background:#e0cea3; border-left:1px solid #fff; border-right:1px solid #fff; margin:0 4px; height:2px; font-size:1px; } .curved .b3 { display:block; overflow:hidden; height:1px; margin:0 4px; background:#e0cea3; border-left:1px solid #fff; border-right:1px solid #fff; margin:0 3px; font-size:1px; } .curved .b4 { display:block; overflow:hidden; height:1px; margin:0 4px; background:#e0cea3; border-left:1px solid #fff; border-right:1px solid #fff; margin:0; height:1px; border-width:0 3px 0 3px; font-size:1px; } .curved .boxcontent { display:block; background:#e0cea3; border:0 solid #fff; border-width:0 1px; }

ВАЖНО: определить размер шрифта 1px для каждой из линий. Иначе IE поместит промежуток между каждой линией.

Классы .b1, .b2, .b3 и .b4 имеют некоторые одинаковые параметры, и вышеупомянутый CSS код можно сжать:

.curved { background:transparent; width:40%; } .curved h1, .curved p { margin:0 10px; } .curved h1 { font-size:2em; color:#fff; } .curved p { padding-bottom:0.5em; } .curved .b1, .curved .b2, .curved .b3, .curved .b4 { display:block; overflow:hidden; height:1px; font-size:1px; } .curved .b2, .curved .b3, .curved .b4 { background:#e0cea3; border-left:1px solid #fff; border-right:1px solid #fff; } .curved .b1 { margin:0 4px; background:#fff; } .curved .b2 { margin:0 4px; height:2px; } .curved .b3 { margin:0 3px; } .curved .b4 { margin:0; height:1px; border-width:0 3px 0 3px; } .curved .boxcontent { display:block; background:#e0cea3; border:0 solid #fff; border-width:0 1px; }

Пример 2. "Сузившиеся кривые"

Этот пример имеет сузившуюся кривую. Ниже показов, как это достигнуто.



b1 - верхняя линия, толщиной 1px с белым фоном без отступов.
b2 – вторая с верху линия, толщиной 1px с желтым фоном, левая/правая граница толщиной 2px белого цвета и левый/правый отступ толщиной 1px.
b3 – третья сверху линия, толщиной 1px с желтым фоном, левая/правая граница толщиной 1px белого цвета и левый/правый отступ толщиной 3px.
b4 – четвертая сверху линия, толщиной 2px с желтым фоном, левая/правая граница толщиной 1px белого цвета и левый/правый отступ толщиной 4px.
Слой с контентом - желтый фон и левая/правая граница толщиной 1px белого цвета с отступами по 5px.

HTML код будет такой же как и в первом примере, за исключением названия класса.

<div class="serif"> <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b> <div class="boxcontent"> <h1>Пример 2</h1> <p>"Сузившиеся кривые"</p> </div> <b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b> </div>

CSS для этого примера следующий:

.serif { background: transparent; width:40%; } .serif h1, .serif p { margin:0 10px; } .serif h1 { font-size:2em; color:#fff; } .serif p { padding-bottom:0.5em; } .serif .b1, .serif .b2, .serif .b3, .serif .b4 { display:block; overflow:hidden; font-size:1px; } .serif .b1, .serif .b2, .serif .b3 { height:1px; } .serif .b2, .serif .b3 { background:#fc0; border-left:1px solid #fff; border-right:1px solid #fff; } .serif .b4 { background:#fc0; border-left:1px solid #fff; border-right:1px solid #fff; } .serif .b1 { margin:0; background:#fff; } .serif .b2 { margin:0 1px; border-width:0 2px; } .serif .b3 { margin:0 3px; } .serif .b4 { height:2px; margin:0 4px; } .serif .boxcontent { display:block; background:#fc0; border-left:1px solid #fff; border-right:1px solid #fff; margin:0 5px; }

Пример 3. "Вершина и основание"

Этот пример имеет вершину «постамента» и основание. Отметьте, что кривая составлена из пяти линий, но вторые и четвертые линии имеют один и тот же стиль.



b1 - верхняя линия, толщиной 1px с белым фоном с отступом с обоих краев по 2px.
b2 – вторая с верху линия, толщиной 1px с пастельным красным фоном, левая/правая граница толщиной 1px белого цвета и левый/правый отступ толщиной 1px.
b3 – третья сверху линия, толщиной 2px с пастельным красным фоном, левая/правая граница толщиной 1px белого цвета без отступов.
b4 – четвертая сверху линия, толщиной 1px с пастельным красным фоном, левая/правая граница толщиной 4px белого цвета и левый/правый отступ толщиной 2px.
Слой с контентом - с пастельным красным фоном и левая/правая граница толщиной 1px белого цвета с отступами по 5px.

HTML код следующий:

<div class="pillar"> <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b2"></b><b class="b4"></b> <div class="boxcontent"> <h1>Пример 3</h1> <p>"Вершина и основание"</p> </div> <b class="b4"></b><b class="b2"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b> </div>

Код со стилями:

.pillar { background:transparent; width:40%; } .pillar h1, .pillar p { margin:0 10px; } .pillar h1 { font-size:2em; color:#fff; } .pillar p { padding-bottom:0.5em; } .pillar .b1, .pillar .b2, .pillar .b3, .pillar .b4 { display:block; overflow:hidden; font-size:1px; } .pillar .b1, .pillar .b2, .pillar .b4 { height:1px; } .pillar .b2, .pillar .b3 { background:#d66; border-left:1px solid #fff; border-right:1px solid #fff; } .pillar .b4 { background:#d66; border-left:4px solid #fff; border-right:4px solid #fff; } .pillar .b1 { margin:0 2px; background:#fff; } .pillar .b2 { margin:0 1px; border-width:0 1px; } .pillar .b3 { height:2px; margin:0; } .pillar .b4 { margin:0 2px; } .pillar .boxcontent { display:block; background:#d66; border-left:1px solid #fff; border-right:1px solid #fff; margin:0 5px; }

Пример 4. "Изогнутая граница с выпуклым трехмерным эффектом "

Вышеупомянутые примеры однотипны, но с небольшими изменениями цвета границы возможно получить трехмерный эффект. Пример 4 основан по стандарту «изогнутая граница», но имеет выпуклый трехмерный эффект. Используются 5 оттенков серого и белый цвет. Этот метод работает одинаково хорошо с 5 оттенками пастельных цветов.



b1 - верхняя линия, толщиной 1px с белым фоном с отступом с обоих краев по 5px.
b2 – вторая с верху линия, толщиной 1px с серым (#CCCCCC) фоном, левая граница толщиной 2px белого цвета и отступ толщиной 3px, правая граница толщиной 2px светло-серого (#ЕЕЕЕЕЕ) цвета и отступ толщиной 3px.
b3 – третья сверху линия, толщиной 1px с серым (#CCCCCC) фоном, левая граница толщиной 1px белого цвета и отступ толщиной 2px, правая граница толщиной 1px темно-серого (#DDDDDD) цвета и отступ толщиной 2px.
b4 – четвертая сверху линия, толщиной 2px с серым (#CCCCCC) фоном, левая граница толщиной 1px белого цвета и отступом, толщиной 1px, правая граница толщиной 1px темно-серого (#АААААА) цвета и отступом толщиной 1px.
Слой с контентом - с серым (#CCCCCC) фоном, левая граница толщиной 1px белого цвета без отступа, правая граница толщиной 1px темно-серого (#999999) цвета без отступа.
b4b – четвертая снизу линия, толщиной 2px с серым (#CCCCCC) фоном, левая граница толщиной 1px светло-серого (#ЕЕЕЕЕЕ) цвета и отступ толщиной 1px, правая граница толщиной 1px темно-серого (#999999) цвета и отступ толщиной 1px.
b3b – третья снизу линия, толщиной 1px серым (#CCCCCC) фоном, левая граница толщиной 1px светло-серого (#DDDDDD) цвета и отступ толщиной 2px, правая граница толщиной 1px темно-серого (#999999) цвета и отступ толщиной 2px.
b2b – вторая снизу линия, толщиной 1px с серым (#CCCCCC) фоном, левая граница толщиной 2px светло-серого (#АААААА) цвета и отступ толщиной 3px, правая граница толщиной 2px темно-серого (#999999) цвета и отступ толщиной 3px.
b1b - нижняя линия, толщиной 1px с 2px темно-серым (#999999) фоном с отступом с обоих краев по 5px.

HTML код вышеприведенного примера:

<div class="raised"> <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b> <div class="boxcontent"> <h1>Пример 4</h1> <p>"Изогнутая граница с выпуклым трехмерным эффектом"</p> </div> <b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b> </div>

CSS код:

.raised { background:transparent; width:40%; } .raised h1, .raised p { margin:0 10px; } .raised h1 { font-size:2em; color:#fff; } .raised p { padding-bottom:0.5em; } .raised .b1, .raised .b2, .raised .b3, .raised .b4, .raised .b1b, .raised .b2b, .raised .b3b, .raised .b4b { display:block; overflow:hidden; font-size:1px; } .raised .b1, .raised .b2, .raised .b3, .raised .b1b, .raised .b2b, .raised .b3b { height:1px; } .raised .b2 { background:#ccc; border-left:1px solid #fff; border-right:1px solid #eee; } .raised .b3 { background:#ccc; border-left:1px solid #fff; border-right:1px solid #ddd; } .raised .b4 { background:#ccc; border-left:1px solid #fff; border-right:1px solid #aaa; } .raised .b4b { background:#ccc; border-left:1px solid #eee; border-right:1px solid #999; } .raised .b3b { background:#ccc; border-left:1px solid #ddd; border-right:1px solid #999; } .raised .b2b { background:#ccc; border-left:1px solid #aaa; border-right:1px solid #999; } .raised .b1 { margin:0 5px; background:#fff; } .raised .b2, .raised .b2b { margin:0 3px; border-width:0 2px; } .raised .b3, .raised .b3b { margin:0 2px; } .raised .b4, .raised .b4b { height:2px; margin:0 1px; } .raised .b1b { margin:0 5px; background:#999; } .raised .boxcontent { display:block; background:#ccc; border-left:1px solid #fff; border-right:1px solid #999; }

Я оставлю стиль в этой форме, чтобы дать возможность понять, как это сделано, но так же присутствует возможность уплотнить и оптимизировать этот код.

Пример 5. "3D вдавливание"

Это подобно примеру 4, но на сей раз в итоге получаем 3D эффект вдавливания.



HTML код вышеприведенного примера:

<div class="inset"> <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b> <div class="boxcontent"> <h1>Пример 5</h1> <p>3D эффект вдавливания</p> </div> <b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b> </div>

CSS код:

.inset { background:transparent; width:40%; } .inset h1, .inset p { margin:0 10px; } .inset h1 { font-size:2em; color:#fff; } .inset p { padding-bottom:0.5em; } .inset .b1, .inset .b2, .inset .b3, .inset .b4, .inset .b1b, .inset .b2b, .inset .b3b, .inset .b4b { display:block; overflow:hidden; font-size:1px; } .inset .b1, .inset .b2, .inset .b3, .inset .b1b, .inset .b2b, .inset .b3b { height:1px; } .inset .b2 { background:#ccc; border-left:1px solid #999; border-right:1px solid #aaa; } .inset .b3 { background:#ccc; border-left:1px solid #999; border-right:1px solid #ddd; } .inset .b4 { background:#ccc; border-left:1px solid #999; border-right:1px solid #eee; } .inset .b4b { background:#ccc; border-left:1px solid #aaa; border-right:1px solid #fff; } .inset .b3b { background:#ccc; border-left:1px solid #ddd; border-right:1px solid #fff; } .inset .b2b { background:#ccc; border-left:1px solid #eee; border-right:1px solid #fff; } .inset .b1 { margin:0 5px; background:#999; } .inset .b2, .inset .b2b { margin:0 3px; border-width:0 2px; } .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; background:#ccc; border-left:1px solid #999; border-right:1px solid #fff; }

Важно.

Вы, возможно, заметили, что все вышеупомянутые примеры кода стилей имеют начальную установку для <p> и <h1>, как показано ниже:

.inset h1, .inset p { margin:0 10px; } .inset h1 { font-size:2em; color:#fff; } .inset p { padding-bottom:0.5em; }

Используя метод Krazy Korners, необходимо избавиться от любых отступов сверху и снизу слоя с контентом, иначе появится свободное место, помешающее добиться желаемого эффекта.

Заключение.

Стили Krazy Korners бесконечны и требуют только небольшого количества воображения. А напоследок я покажу вам несколько готовых "живых" вариантов.

Примеры других возможностей метода Krazy Korners.