Сглаженные закругленные углы без использования изображений

Аватара пользователя
SLITE
Сообщения: 204
Зарегистрирован: 01 янв 2010
Различные фишки и приемы с использованием CSS всегда привлекали и привлекают мое внимание. В их числе находится и способ закругления углов блока без использования какой-либо графики.

Итак, моя задача заключалась в реализации с помощью CSS вот такой рамки, абсолютно не используя изображения:
framework.gif
framework.gif    746 байт • 571 просмотр

Увеличенное изображение угла выглядит следующим образом:
zoomed_corner.gif

Я сделал абсолютно идентичный вариант с помощью 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;
* кроссбраузерность кода;
* углы закруглены без использования графики;
* углы сглажены.

Из минусов данной модели стоит отметить лишь несемантическую верстку и размер кода, который, имхо, не так существенен.
Источник

Вернуться в «Уроки и статьи по верстке»