Делаем закругленные уголки с помощью псевдоэлементов :before и :after

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

Все наверное сталкивались с врезками с закруглёнными уголками. Поскольку множественный бекграунд современные браузеры (кроме Safari) не поддерживают, то такие вещи приходится делать несколькими элементами, вложеными друг в друга. Есть способ уже сейчас избежать подобных вещей.
html-код:

<div class="incut">
Текст
</div>


css-код:
Задаем голубой фон врезки:

.incut{background: #dff7ff;padding: 20px;}

Четыре уголка навешиваем на элементы :before и :after

.incut:before{
content:url(i/border_tl.gif);
background: url(i/border_tr.gif) no-repeat 100% 0;
height: 7px;
display: block;
margin: -20px -20px 13px -20px;
}
.incut:after{
content:url(i/border_bl.gif);
background: url(i/border_br.gif) no-repeat 100% 0;
height: 7px;
display: block;
margin:13px -20px -20px -20px;
}

Работает во всех современных броузерах кроме ie (проверял в Firefox 1-2 Opera 7-9,Safari 3). Для ie аналогичный функционал навешиваем с помощью js (лучше помещать в отдельный файл css – специальный для ie):

.incut{zoom:1;behavior:expression(!this.isInserted==true ? this.isInserted=(this.innerHTML = '<span style="background: url(i/border_tr.gif) no-repeat 100% 0;height: 7px;display: block;margin: -20px -20px 13px -20px;"><img src="i/border_tl.gif" alt="" /></span>' + this.innerHTML + '<span style="background: url(i/border_br.gif) no-repeat 100% 0;height: 7px;display: block;margin:13px -20px -20px -20px;"><img src="i/border_bl.gif" alt="" /></span>') : '');}

Работает в ie6-7. При отключеных скриптах пользователь ie увидит голубой фон у врезки, т.е. ничего не сломается.

В результате имеем «пуленепробиваемую» врезку с минимум html-кода. Заметьте, что вы можете указать ещё одну картинку у врезки, которая будет её бекграундом.

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

Источник: http://dyakov.habrahabr.ru/

Font-size от xx-small до xx-large

05-01-2010

Проблема размера шрифтов всегда волнует веб-разработчиков. В CSS есть семь ключевых слов для обозначения размера шрифта. Они введены для того, чтобы дизайнеры особо не напрягались над проблемами доступности текстов на страницах. Размер варьируется от xx-small до xx-large и этот размер берется относительно установленного пользователем в браузере размера medium. Вот что мы видим в спецификации CSS-1... подробнее Комментарии: 4 Кол. просмотров: общее - 4473 сегодня - 1

История про CSS (часть II)

05-01-2010

Продолжаем разговор о применении таблиц стилей. Сначала разберемся с каскадностью стилей, а потом перейдем к рассмотрению синтаксиса и обзору наиболее часто встречающихся параметров, применяемых при создании стилей... подробнее Комментарии: 0 Кол. просмотров: общее - 4696 сегодня - 1

Трюк с курсором

05-01-2010

Наверно вы уже заметили, что на некоторых сайтах при наведении на ссылки появляется... совсем не рука, которая многим уже надоела, а какая-нибудь там стрелка, часы и т.п. Как это сделать? Очень просто! Надо всего лишь добавить стиль курсора в код ссылки. Пример кода... подробнее Комментарии: 0 Кол. просмотров: общее - 4488 сегодня - 0

Необычное применение CSS: реализация эффекта rollover c помощью CSS

05-01-2010

Эрик Мейер нашел очень интересное использование псевдо-класса :hover. Оказывается, с помощью свойства display, контекстного селектора и :hover можно реализовать эффект rollover, когда при наведении мышкой появляется картинка. Делается это следующим образом... подробнее Комментарии: 3 Кол. просмотров: общее - 4450 сегодня - 0

Сокращенные команды в CSS

05-01-2010

Одно из основных преимуществ использования CSS - это значительное уменьшение времени загрузки страниц. Для того, чтобы назначить стиль тексту, нужно было раньше использовать конструкцию множество раз... подробнее Комментарии: 0 Кол. просмотров: общее - 5198 сегодня - 1