Заметки об HTML, CSS, AJAX, DOM, PHP, MySQL и многом другом

Закругленные или фигурные углы блока в настоящее время — один из самых распространенных элементов дизайна. Решений существует множество и на CSS, и на JavaScript, но большая их часть либо требует большого количества лишних пустых тегов и несемантичной верстки, либо позволяет закруглять углы только блоков с фиксированной высотой или с однородным фоном самого блока и страницы под ним.

Однако есть универсальное решение этой проблемы, которое может применяться в решениях любой сложности. Выглядит оно следующим образом: над блоком с контентом, которому нужны углы, добавляем два блока, высота которых равна радиусу скругления, с горизонтальными полями (margin), также равными отступу. Фон этого блока по цвету совпадает с фоном блока контента. Внутри этого блока помещаем еще два блока, у первого из которых отрицательным является левое поле, у второго — правое (величина отступа опять же равна радиусу скругленного угла). Для этих углов задаем фоновые картинки и отменяем фоновый цвет.

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

В виде HTML-кода это выглядит примерно следующим образом:

<div class="topline"><div><div></div></div></div>
<div class="content">Здесь идет контент</div>
<div class="bottomline"><div><div>
Здесь тоже может быть текст, который должен показываться в самом низу блока, например, copyright-сообщение
</div></div></div>

CSS будет иметь такой вид:

.topline, .content, .bottomline {width: ...} /* Задаем единую ширину для всех блоков, желающие могут поместить их в общий контейнер и задавать ширину для него. */
.topline, .bottomline { margin: 0px 19px } /* В данном примере радиус угла скругления -- 19px */
.topline div, .bottomline div { margin-left: -19px  }
.topline div div, .bottomline div div { margin-right: -19px; height: 19px }

.topline { background: url('mback2.jpg'); background-repeat: repeat-x } /* В данном примере для вложенного блока используется градиентный фон. Файл mback2.jpg содержит самую верхнюю часть градиента */
.topline div { background-image: url('corn_tl.gif'); background-repeat: no-repeat; } /* Верхний левый уголок */
.topline div div { height: 19px; background-image: url('corn_tr.gif'); background-position: right; background-repeat: no-repeat; } /* Верхний правый уголок. Здесь же задаем высоту, равную радиусу скругления. Если радиус маленький, не забываем про font-size: 0 для MSIE */

.content { padding: ...; margin: ...; background-image: url('mback.jpg') }  /* Основная часть градиента */

.bottomline { background: #000; } /* В нижней части блока наш градиент плавно перешел в черный цвет, чтобы блок можно было растягивать по высоте настолько, насколько потребуется */
.bottomline div { background: url('corn_bl.gif'); background-repeat: no-repeat } /* Нижний левый уголок */
.bottomline div div { background: url('corn_br.gif'); height: 19px;background-position: right; background-repeat: no-repeat } /* Нижний правый уголок */

Возможности, которые дает такое решение:
1) если у уголков прозрачной является внешняя часть, а не внутренняя, то фон страницы (или родительского блока) может быть неоднородным;
2) фон самого блока может быть градиентным, уголки при этом также остаются градиентными;
3) не накладывается каких-либо ограничений на отступы (margin и padding) и высоту блока с контентом, ими можно управлять свободно;
4) верхняя и нижняя области рядом с уголками не являются “мертвой зоной”, как это обычно бывает во многих других решениях, там можно поместить какой-либо текст (например, заголовок вверху и copyright-сообщение внизу), либо организовать “наползание” блока с контентом на уголки, поставив ему отрицательные вертикальные поля (margins);
5) несмотря на то, что вместо одного тега становится 7, объем кода увеличивается несущественно: только для трех из них требуется указывать классы. Кроме того, решение легко воспринимается из-за своей полной симметричности, так что почти не страдает читаемость кода.

К недостаткам подхода можно отнести необходимость использовать большое количество фоновых изображений (4 уголка обязательно + 2 или 3 фоновых рисунка, если используется градиент или сложный фон). Однако эта проблема легко решается за счет использования технологии Data In URIs, описанной ранее.

Метки: скругленные углы

Запись создана в Среда, 17 июня 2009 г. в 18:47. Рубрика: CSS, HTML. Вы можете подписаться на комментарии к этой записи RSS 2.0. Вы можете оставить отзыв, или отправить trackback со своего сайта.