Скругленные границы через CSS

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

Сложность элементов интерфейса увеличивается с каждым новым макетом, что доставляет немало хлопот верстальщикам. Развивающиеся технологии позволяют создавать в WEBе сложные приложения (Google не даст мне соврать), поэтому дизайнеры себя не сдерживают и рисуют всё более навороченные вещи. Как правило, это приводит к большому количеству графики на страницах.

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

1. Скругленные границы

Сразу поясню о чем речь:

Необходимо сверстать этот блок так, чтобы он тянулся по ширине и высоте. Как правило, первое что приходит в голову — сверстать таблицу 3x3. В угловые ячейки положить 4 разных изображения с уголками, в центр поместить контент, а остальным ячейкам повесить соот-ие бордеры. Способ кроссбраузерный и довольно простой. Но во-первых, верстать такие блоки таблицами не по фэншую, а во-вторых можно отказаться от четырех мелких изображений.

Итак, соберем четыре угла в одно изображение. В моем примере получился такой результат (32x26 px):

Теперь нам осталось спозиционировать это изображение в фоне четырьмя разными способами в блоках размером 16x13px, стоящими в углах блока. В результате у автора получилось вот так:

CSS:

.roundborder {    border-top:1px solid #DBDBDB;    border-bottom:1px solid #DBDBDB;}    .roundborder .content {        border-left:1px solid #DBDBDB;        border-right:1px solid #DBDBDB;            text-align:center;        color:#7A7A7A;        padding:10px 15px;    }    .roundborder .t, .roundborder .b {        position:relative;        height:12px;    }        .roundborder .t div, .roundborder .b div {            position:absolute;            width:16px; height:13px;            padding:0; margin:0;        }        .roundborder .t .l {            top:-1px; left:0;            background:#FFF no-repeat url(http://fastcoder.org/demo/angles.gif) top left;        }        .roundborder .t .r {            top:-1px; right:0;            background:#FFF no-repeat url(http://fastcoder.org/demo/angles.gif) top right;        }        .roundborder .b .l {            background:#FFF no-repeat url(http://fastcoder.org/demo/angles.gif) bottom left;            bottom:-1px; left:0;        }        .roundborder .b .r {            background:#FFF no-repeat url(http://fastcoder.org/demo/angles.gif) bottom right;            bottom:-1px; right:0;        }

HTML:

<div class="roundborder">    <div class="t">        <div class="angles l"></div>        <div class="angles r"></div>    </div>    <div class="content">        Content    </div>        <div class="b">        <div class="angles l"></div>        <div class="angles r"></div>    </div></div>

Изначально углы были сверстаны через 4 ДИВа, разбросанных по углам, и всё бы хорошо, если бы не одно НО — IE6. В нем этот номер не пролез, пришлось всё переверстывать таким вот образом. Итак, задача решена: мы избавились от таблиц и уменьшили число HTTP-соединений на три, за счет сбора углов в один овал.

источник: fastcoder.org

Уважаемые посетители,
Если Вы хотите оставить заказ на разработку сайта или получить предварительную консультацию воспользуйтесь формой по ссылке ниже.

Наш специалист ответит вам в течении суток.

3 декабря 2008 1 6 695 HTML, border, CSS, скрипты, полезности, Версия для печати

Комментарии (1)

#1 написал: TCSE
Группа: Администраторы
6 марта 2009 16:41

комментарий на сайте http://fastcoder.org/

Да, с бордерами гениально)) Спасибо. А скругленные блоки я например делаю так:

.block {
background-color: #BBCFDF;
color: #1C2C39;
width: 30%; }
.block .hrt, .block .hrb, .block .hrt div, .block .hrb div {
background: url(bg.png) no-repeat 0 0; }
.block .hrt, .block .hrb {
font-size: 1px;
line-height: 1px;
height: 8px;
clear: both; }
.block .hrt div, .block .hrb div {
float: right;
width: 8px;
height: 8px; }
.block .hrb {
background-position: 0 100%; }
.block .hrt div {
background-position: 100% 0; }
.block .hrb div {
background-position: 100% 100%; }

<div class="block">
<div class="hrt"><div>
;</div></div>
<div>content</div>
<div class="hrb"><div>
;</div></div>
</div>
0