Автор: http://suprabiz.com/
Различные фишки и приемы с использованием CSS всегда привлекали и привлекают
мое внимание. В их числе находится и способ закругления углов блока без
использования какой-либо графики.
Вот несколько статей, описывающих технику закругления углов, о которой я веду
речь в этой статье:
Мне данный подход очень понравился, но единственное, что сдерживало от
применения оной методики - такие углы не выглядят сглаженными
(да, вот такой я привередливый :). А этого мне не хватало, поэтому решил пойти
до конца, доработав имеющийся вариант.
Итак, моя задача заключалась в реализации с помощью CSS вот
такой рамки, абсолютно не используя изображения:
Увеличенное изображение угла выглядит следующим образом:
Я сделал абсолютно идентичный вариант с помощью CSS. За основу был взят
предложенный ранее вариант. Чтобы добавить дополнительные пиксели, которые
придадут углам сглаженность, я использовал несколько вложенных тегов,
каждый из которых состоит из одной буквы (b, i, q).
Это позволяет максимально оптимизировать HTML-код.
HTML
-
<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">
-
-
CSS - это здорово!
-
-
</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>
Получилась довольно-таки некрасивая конструкция, что “попахивает”
извращением, но я лично готов пожертвовать этим ради возможности обойтись без
графики. Если сравнивать размер HTML-кода с “несглаженным” вариантом, то разница
не такая уж и значительная.
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;
-
}
Примеры решения
Для сравнения 3-х вариантов посмотрите
примеры решения
задачи закругления углов: с помощью изображений, простое закругление с
использованием CSS и сглаженное закругление.
Что мы имеем в результате:
- валидный код CSS и HTML;
- кроссбраузерность кода;
- углы закруглены без использования графики;
- углы сглажены.
Из минусов данной модели стоит отметить лишь несемантическую верстку
и размер кода, который, имхо, не так существенен.
|
