Скруглённые уголки — мой любимый элегантный способ

Наверное в любом деле есть вечные темы. От всего остального они отличаются тем, что всплывают постоянно, требуют всё новых и новых обсуждений. Вокруг них разворачиваются громадные многовековые дискуссии, и сами дискутирующие часто забывают, о чём говорят. Вечные темы примечательны и тем, что для каждой из них испокон веков существует десяток-другой удобных решений, о которых вечно забывают.

Одна из таких тем в HTML-вёрстке — это скруглённые уголки. Существует, как минимум, сотня способов вёрстки скруглённых уголков: с джаваскриптом и без него, с картинками и без них, с поддержкой IE6 и без неё, с помощью CSS3 и без… Ничего нового я наверняка не скажу, но своим любимым способом поделюсь. Итак,

Простой и элегантный способ вёрстки скруглённых уголков, работающий в IE6

Оговорюсь: я рассмотрю технологию вёрстки только для блоков. Для строковых элементов она наверняка не подойдёт.

Вкратце идея такова: границу блока делаем свойством border, а уголки — картинками, спозиционированными абсолютно, по углам.

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

Преимущества очевидны:

1. Границы не пропадают при отключении картинок — пропадают только уголки;
2. Блок, который мы оформляем таким образом, может быть любым по размеру. При этом картинка (спрайт) с уголками загружается очень быстро;
3. Немного HTML-кода: нету никаких врапперов, состоящих из десяти вложенных блоков.

Недостатки тоже есть:

1. Способ не универсален: не стоит пытаться оформлять таким образом блоки, лежащие на сложных фоновых картинках, строковые элементы и т.д.;
2. Лишний HTML-код в принципе есть, хотя его может и не быть вовсе (при использовании CSS-свойств);
3. Для IE6 нужны костыли.

Простой пример вёрстки с использованием элегантных скруглённых уголков

HTML-код:

1
2
3
4
5

<div class="comment corners">
    <p>Классная статья, огромное спасибо! ...</p>
    <p class="author"><em>Иннокентий Даздасенович</em></p>
    <p class="decor"><b></b><i></i><s></s><u></u></p>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

.corners { position:relative; }

	.corners .decor b,
	.corners .decor i,
	.corners .decor s,
	.corners .decor u { position:absolute;
		width:10px; height:10px;
		background:url("c.png") no-repeat; }

		.corners .decor b { left:-1px; top:-1px; }
		.corners .decor i { right:-1px; top:-1px;
			background-position:right top; }
		.corners .decor s { right:-1px; bottom:-1px;
			background-position:right bottom; }
		.corners .decor u { left:-1px; bottom:-1px;
			background-position:left bottom; }

Для самих уголков я использую элементы b, i, s, u — где-то подсмотрел, уже не помню. Достаточно удобно, хотя и совершенно бессмысленно. Элементы располагаются в коде в алфавитном порядке, а позиционируются как принято в CSS.

Чтобы не пугать пользователей, эти элементы я расположил внутри блока .decor. Там никогда не появится пользовательского контента с полужирным или курсивным выделением, соответственно ничего и не развалится.

Симпатичное оформление «балунов» с использованием элегантных уголков

Более подходящий пример для использования простого и элегантного способа вёрстки скруглённых уголков

Именно в таком случае использование моего любимого способа вёрстки уголков оправдано. Код для этого примера не привожу, он отличается не сильно (и его можно раскопать самостоятельно, по ссылке на картинке). Главное отличие в том, что из-за использования другого изображения уже не получается позиционировать фоновую картинку с помощью ключевых слов left, right и т.п. — на смену пришли пиксели.

А как же IE6?

Действительно, в начале статьи я заявил о том, что способ прекрасно работает в IE6. С ним действительно почти не возникает проблем, если блоку .corners задать hasLayout, а уголкам, которые суть строковые элементы, — нулевую высоту.

Правда, IE6 страдает болезнью позиционирования абсолютных элементов внутри контейнера с высотой в нечётное количество пикселей. С этим не поспоришь, приходится выставлять чётные значения вертикальных полей и высоты строки. Вот CSS-затычка, после которой всё работает правильно:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

/* ie6 hasLayout */
 * html .corners { zoom:1; }

 /* ie6 hiding decor container */
 * html .corners .decor { margin:0;    
 zoom:1; }

 /* ie6 odd value bug fix */
 * html .corners { line-height:20px; }
 * html p { margin:10px 0; } 

 /* ie6 inline height fix */
 * html .corners .decor * { font-size:0; line-height:0; }

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

Кто говорит?

Меня зовут Олег Громов, я веб-разработчик. Недавно я начал работать под именем своей небольшой студии разработки фронтенда 12faces. Мы работаем над всем, что может увидеть пользователь: проектируем и рисуем интерфейсы, а потом воплощаем задуманное в жизнь с помощью HTML, CSS и Javascript.

Запись опубликована в рубрике Вёрстка с метками css, html.