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


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

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

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

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

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

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


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

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

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


Теперь нам осталось спозиционировать это изображение в фоне четырьмя разными способами в блоках размером 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


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



Похожие публикации

Выравниваем блок по центру страницы

Очень часто стоит задача выровнять блок по центру страницы / экрана, да ещё и так, чтобы без ява-скрипта, без задания жёстких размеров или отрицательных отступов, ещё чтобы и скроллбары работали у... читать далее

Как сверстать веб-страницу. Часть 2 — Bootstrap

Введение Уважаемый читатель, эта статья является второй частью цикла статей, посвященных вёрстке. В первой части мы верстали шаблон Corporate Blue от студии Pcklaboratory с помощью стандартных... читать далее

Шпаргалка по верстке для больших и маленьких

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

Блог им. smashercosmo / Кроссбраузерная вёрстка отформатированного кода

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

Opera / Презентации в браузере? Нет проблем.

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

Google / В индекс Google по кнопке

Google запустил новый сервис «On-Demand Indexing» для вебмастеров, которые установили поиск от Google у себя на сайте. Сервис позволяет вебмастеру самостоятельно «сказать» когда нужно... читать далее

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

  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

       

Прокомментировать


@

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent

Архив сайта

Реклама на сайте