Рамки таблиц с округленными краями без использования графики.

Рамки таблиц с округленными краями без использования графики.  
Рамки таблиц с округленными краями без использования графики.
 

Рамки таблиц с округленными краями без использования графики.:

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

Рамки таблиц с округленными краями без использования графики.


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

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

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

Пример 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. "Сузившиеся кривые"

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

Пример 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. "Вершина и основание"

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

Пример 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 оттенками пастельных цветов.

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


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 эффект вдавливания.

Пример 5 - 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 бесконечны и требуют только небольшого количества воображения. А напоследок я покажу вам несколько готовых "живых" вариантов.


Пример 1

Вогнутые во внутрь углы



Пример 2

Вогнутая кривая.



Пример 3

Рillar эффект.



Пример 4

3D эффект объемности



Пример 5

3D эффект объемности (вдавленность).




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


Рубленая рамка

Углы под 45 градусов



Квадраты

Рамка с квадратной выборкой.



Бочка

Форма, сужающаяся по краям.


| Блоки в CSS или Сайт без таблиц | Содержание | Цветная полоса прокрутки. |

Баннер Profit-Partner.ru

Опрос
Вопрос: Ваш возраст ?
< 15
15 - 17
18 - 25
26 - 33
34 - 45
> 45
 
 
 


Яндекс цитирования
Rambler's Top100

  Copyright © 2005-2006 WCode.Ru Group