В этой статье я расскажу про два, наиболее часто используемых мной, способа
верстки «закругленных уголков». Оба они очень просты в применении.
Итак,
первый способ. Он подойдет для простых одноцветных
блоков с обрамляющей рамкой или без неё. Для начала нам надо знать цвет фона и
параметры рамки для нашего блока. Допустим, цвет фона блока будет #CCCCCC, а
цвет рамки, толщиной в 1 пиксель — #666666. Далее создаем круг с данными
параметрами и нужного скругления в Fireworks, Photoshop или любом другом
редакторе. Всё! Все четыре уголка мы собрали в один файл и воспользуемся им в
CSS следующим образом: мы создадим внешний контейнер (блок) с относительным
позиционированием (position:relative) и контейнер для хранения одного уголка
(четверти) нашего созданного круга. Таких контейнеров при верстке нам
понадобиться 4 штуки (т.е число равное количеству углов блока). Эти уголки будут
с абсолютным позиционированием и у каждого будет своя позиция бэкграунда,
соответствующая стороне угла. Код ниже иллюстрирует всё выше сказанное:
<style type="text/css">
.container { position:relative; background:#ccc; border:1px solid #666; color:white; padding:20px; }
.corners { position:absolute; width:20px; height:20px; background:url(round.png) no-repeat; margin:-1px;
/* отрицательный отступ нужен при использовании бордера */ }
.corners.c1 { left:0; top:0; background-position:left top; }
.corners.c2 { right:0; top:0; background-position:right top; }
.corners.c3 { left:0; bottom:0; background-position:left bottom; }
.corners.c4 { right:0; bottom:0; background-position:right bottom; }
</style>
<div class="container" style="width:50%;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum
dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
<i class="corners c1"></i><i class="corners c2"></i><i class="corners c3"></i><i class="corners c4"></i>
</div>
Второй способ. Чтобы не
«париться» и не нарезать кучу кусков бэкграунда и уголков, мы создаем один файл
максимально допустимых размеров (X и Y). Эта «подложка» будет похожа на то что
нам нужно получить в итоге (блок с закгругленными уголками), но она будет
огромна (несмотря на это, размер PNG-файла будет не сильно большой). Идея
заключается в следующем: используя «подручные средства» CSS, мы «растащим»
нужные куски бэкграунда в разных направлениях. Чтобы не описывать всё это
словами и наглядно посмотреть (так понятнее будет), я нарисовал такую
схему:
Удобство такого метода
заключается в том, что мы можем использовать его код многократно, без
необходимости указания в CSS-файле фона для каждого элемента со своей рамкой,
т.к бэкграунд наследуется от внешнего контейнера и сам фон можно задать прямо
через свойство «style».
Также этот способ позволяет использовать подложки с
прозрачностью (PNG 32), но поддержка IE 6 в таком случае не реализована (будет
серый фон на месте прозрачностей).
А вот и непосредственно весь HTML/CSS код
этого метода:
<style type="text/css">
.box { position:relative; display:block; background:none no-repeat left top; zoom:1; font-size:30px; /* радиус скругления подложки */ }
.box .bc { position:absolute; width:1em; height:1em; left:0; bottom:-1em; background-position:left bottom !important; }
.box .rc { position:absolute; width:1em; height:1em; right:-1em; top:0; background-position:right top !important; }
.box .text { position:relative; display:block; background-position:right bottom !important; padding:0 1em 1em 0;
right:-1em; bottom:-1em; zoom:1; }
.box .bc, .box .rc, .box .text { background:inherit; background:expression(this.parentNode.currentStyle.backgroundImage);
/* наследуем бэкграунд от родительского элемента */ }
</style>
<div class="box" style="width:50%; background-image:url(image.png);">
<div class="text">
<span style="font-size:17px;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum
dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</span>
</div>
<i class="rc"></i><i class="bc"></i>
</div>
|
