Статьи, пособия, примеры начинающим вебмастерам.

Горячий поиск: PHP CSS SEO
Главная » ГлавнаяCSS Закругленные углы средствами CSS

Закругленные углы средствами CSS

Бродя по различным сайтам и блогам, я обнаружил интересную тенденцию - в последнее время стало "модно" описывать различные способы заокругленных углов с помощью таблиц стилей. В принципе, такой способ закругления углов имеет ряд преимуществ перед традиционным (с помощью графики), в частности:
- снижение нагрузки на сервер, ведь даже чтобы загрузить небольшие, в несколько байт гифы, требуется некоторое количество запросов;
- страница одинаково будет выглядеть как при включенной, так и при отключенной графике;
- чтобы изменить цветовую гамму сайта, достаточно поменять несколько значений в CSS-файле вместо того чтобы перерисовывать все уголки заново;
Попробую описать несколько известных мне вариантов закругления углов без использования изображения.

1-ый способ, опубликованный на designformasters.info:

Принцип скругленных углов становится понятен, если взклянуть на схему:


CSS:
.r1, .r2, .r3, .r4, .r5 {
display: block;
height: 1px;
overflow: hidden;
font-size:1px;
}

.r5 { margin: 0 5px; }
.r4 { margin: 0 4px; }
.r3 { margin: 0 3px; }
.r2 { margin: 0 2px; }
.r1 { margin: 0 1px; }

#rounded .inner-box, #rounded b {
background-color: #CCCCCC;
}
.inner-box p { padding-bottom:0.5em; margin:0 10px; }
html:
<div id="rounded">
<b class="r5"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b><b class="r1"></b>
<div class="inner-box">
<p>Способ, предложенный Евгением:</p>
</div>
<b class="r1"></b><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r5"></b>
</div>

Достоинства - компактный код, следавательно быстрая загрузка.
Недостатки - если неаккуратно подобрать цветовую гамму, будут видны "зазубренности" на углах.


2-ой способ описал в своем блоге Дмитрий Лялин:



Визуально, при большом увеличении мы увидим принцип сглаживания:





CSS:
.b1, .b2, .b3, .b4, .b5,
.b1 i, .b2 i, .b3 i, .b4 i, .b5 i,
.b1 b, .b2 b, .b3 b, .b4 b, .b5 b,
.b1 q, .b2 q, .b3 q, .b4 q, .b5 q {
height: 1px;
font-size: 1px;
overflow: hidden;
border-style: solid;
border-width: 0 1px;
display: block;
}
.b1 {
margin: 0 2px;
background: #EBEEF0;
border: none;
}
.b1 b {
margin: 0 1px;
background: #B8C3C8;
border-color: #CBD3D7;
}
.b2 {margin: 0 1px; border-color: #D6DCDF;}
.b2 b {border-color: #B8C3C8;}
.b2 i {border-color: #E4E8EA;}
.b2 q {border-color: #F7F8F9;}
.b3 {border-color: #EBEEEF;}
.b3 b {border-color: #BCC6CB;}
.b3 i {border-color: #F9FAFB;}
.b4 {border-color: #CAD2D6;}
.b4 b {border-color: #E5E9EB;}
.b5 {border-color: #B5C0C6;}
.b5 b {border-color: #FAFBFB;}
.text {
border: 1px solid #B0BCC2;
border-width: 0 1px;
padding: 0 12px;
}
.text p {padding-bottom:0.5em; margin:0 10px; }
html:
<div id="container">
<div class="b1"><b></b></div>
<div class="b2"><b><i><q></q></i></b></div>
<div class="b3"><b><i></i></b></div>
<div class="b4"><b></b></div>
<div class="b5"><b></b></div>
<div class="text">
<p>
Более сложный способ, со сглаживанием
</p>
</div>
<div class="b5"><b></b></div>
<div class="b4"><b></b></div>
<div class="b3"><b><i></i></b></div>
<div class="b2"><b><i><q></q></i></b></div>
<div class="b1"><b></b></div>
</div>

Достоинства - отсутствие "зазубренности", поскольку в таблице стилей эмулируется плавный переход между цветами.
Недостатки - более тяжелый код, следовательно немного большее время загрузки.


3-ой способ подробно описал Стю Николс (Stu Nicholls):



Метод, сейчас известный как "Krazy Korners" станет понятен если взглянуть на схему:





CSS (для рамки):
.curved { background: transparent; width:50%; }
.curved h1, .curved p { margin:0 10px; }
.curved p { padding-bottom:0.5em; }
.curved .b1 {
display:block; overflow:hidden; height:1px; margin:0 4px;
background:#B0BCC2; border-left:1px solid #B0BCC2;
border-right:1px solid #B0BCC2; margin:0 5px; font-size:1px; }
.curved .b2 {
display:block; overflow:hidden; height:1px; margin:0 4px;
background:#EBEEF0; border-left:1px solid #B0BCC2;
border-right:1px solid #B0BCC2; margin:0 3px; border-width:0 2px; font-size:1px; }
.curved .b3 {
display:block; overflow:hidden; height:1px; margin:0 4px;
background:#EBEEF0; border-left:1px solid #B0BCC2;
border-right:1px solid #B0BCC2; margin:0 2px; font-size:1px; }
.curved .b4 {
display:block; overflow:hidden; height:1px; margin:0 4px;
background:#EBEEF0; border-left:1px solid #B0BCC2;
border-right:1px solid #B0BCC2; margin:0 1px; height:2px; font-size:1px; }
.curved .boxcontent {
display:block; background:#EBEEF0; border:0 solid #B0BCC2; border-width:0 1px; }
html (для рамки):
<div class="curved">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="boxcontent">
<p>С рамкой</p>
</div>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
</div>

CSS (для 3D):
.raised { background:transparent; width:50%; }
.raised h1, .raised p { margin:0 10px; }
.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:#EBEEF0; border-left:1px solid #fff; border-right:1px solid #eee; }
.raised .b3
{ background:#EBEEF0; border-left:1px solid #fff; border-right:1px solid #ddd; }
.raised .b4
{ background:#EBEEF0; border-left:1px solid #fff; border-right:1px solid #aaa; }
.raised .b4b
{ background:#EBEEF0; border-left:1px solid #eee; border-right:1px solid #999; }
.raised .b3b
{ background:#EBEEF0; border-left:1px solid #ddd; border-right:1px solid #999; }
.raised .b2b
{ background:#EBEEF0; 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:#EBEEF0; border-left:1px solid #fff;
border-right:1px solid #999; }

html (для 3D):
<div class="raised">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="boxcontent">
<p>С 3D-эффектом</p>
</div>
<b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b>
</div>

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


Тем не менее, любой из предложенных вариантов загружается гораздо быстрее, чем классический вариант, при котором закругленные углы создаются с помощью графики.
Категория: CSS
Опубликовано: 28 января 2008, Обновлено: 19.01.2013 - 20:22 просмотров: 2278
 (Голосов: 1)

Комментирование данной новости запрещено.
Чужих не бывает

Валидация

Правильний CSS!

Valid XHTML 1.0 Transitional

Статистика

Генерация страницы: 0.32 секунд, SQL-запросов: 10.

Copyright

© 2008-2013 webamator.ru

Условия заимствования материалов.