Матвей Земсков

Заметки веб-мастера

Воскресенье, 26 июля 2009 17:19

Верстка блока с овальными уголками.

Оцените материал
(1 Голосовать)

Задача: создать блок с овальными уголками.

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

Ну не буду забегать вперед, опишу все по порядку.

Что нам понадобится для реализации нашей идеи?

Для начала создадим в графическом редакторе рисунок, например. Размером 72 px × 56 px. Размер может меняться в зависимости от Ваших потребностей.

Вот так будет выглядеть рисунок:

овальные уголки для верстки блока

При создании рисунка следует сделать его фон совпадал с фоном страницы или блока – родителя элемента у которого мы создаем овальные уголки.

Далее зайдем в html-редактор создадим файл со следующей структурой:

html

<div id="primer">
<i class="corner tls"></i>
<i class="corner trs"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas arcu lorem, 
suscipit non vehicula id, volutpat ac tellus. Pellentesque commodo pharetra eros, et 
accumsan felis pharetra at.</p>
<p>Suspendisse accumsan eleifend dolor non placerat. Vivamus vehicula luctus 
imperdiet. Pellentesque risus erat, cursus id aliquam sit amet, molestie nec lorem.</p>
<p>Nulla elementum, odio non mollis feugiat, odio tortor fringilla neque, a 
sollicitudin augue felis a nisl. Nullam mi turpis, sodales et venenatis ut, pulvinar 
sed odio.</p>
<i class="corner bls"></i>
<i class="corner brs"></i>
</div> 

Это будет просто блок, внутри которого будет несколько абзацев текста. Обратите внимание на пустые элементы <i> внутри блока. Это как раз и есть наши будущие овальные уголки.

Немного оформим наш документ:

CSS

  
*{
 margin:0;
 padding:0;
 font-size:100%;
}

body{
  font-family:Arial, Helvetica, sans-serif;
}
div#primer{
  width:30%;
  margin:2.5em;
  border: 1px solid #999;
  background:#CCC;
  padding:.8em;
}
div#primer p{
  font-size:.8em;
}

Благодаря этим правилам наш блок уже выглядит более мене прилично, правда уголки прямые. Поэтому двигаемся дальше. Так как наши уголки будут отпозиционированы абсолютно, нам нужно добавить следующее правило к блоку div#primer

CSS

div#primer{
  width:30%;
  margin:2.5em;
  border: 1px solid #999;
  background:#CCC;
  position:relative; /*относительное позиционирование*/
  padding:.8em;
}

Далее переходим непосредственно к оформлению уголков. Уголки оформляются при помощи сочетания правил из двух классов. Правила из «первого» класса (corner) будут применены к каждому из элементов, а дополнительный (второй) класс будет у всех элементов разным.

Итак, класс corner:

CSS

.corner{
  width:36px;
  height:28px;
  position:absolute;/*абсолютное позиционирование*/
  background:url(roundcorn.gif) no-repeat 0 0;
}

Фоном наших элементов <i> будет картинка с изображением уголков. Ширина и высота каждого элемента <i> будет равна половине ширины и высоты рисунка. Кроме того, устанавливаем свойству position элемента значение absolute. А уточнять позиции каждого уголка будем правилах индивидуального класса (.tls, .trs, .bls, .brs)

Вот так будет выглядеть код:

CSS

/*левый верхний угол*/
.tls{
 top:-1px;
 left:-1px;
}
/*правый верхний угол*/
.trs{
 top:-1px;
 right:-1px;
 background-position:100% 0%;
}
/*левый нижний угол*/
.bls{
 bottom:-1px;
 left:-1px;
 background-position:0% 100%;
}
/*правый нижний угол*/
.brs{
 bottom:-1px;
 right:-1px;
 background-position:100% 100%;
}

Например, верхний правый угол будет размещен на 1 пиксель выше и правее своего родителя. Это нужно для того, чтобы граница блока-родителя (div#primer) совпала с фоном нашего уголка, и не было заметно переходов от границы к изображению. Сам фон также сдвинут вправо на 100%.

У левого уголка отсутствует определение свойства background-position, потому он попадает под соответствующее правило из класса corner.

Таким образом, применив указанные выше правила к нашему документу, мы получим блок с овальными уголками.

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

CSS

div#primer p{
  font-size:.8em;
  position:relative;/*применяем эти правила*/
  z-index:1;/*чтобы уголки не закрывали текст */
}

В результате мы добились своего и теперь на нашей страничке блок с овальными уголками.

Скачать код примера.

Прочитано 3210 раз

Добавить комментарий


Защитный код
Обновить

Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию: