Каскадные таблицы стилей
CSS советы & приемы

(Эта страничка использует каскадные таблицы стилей CSS)

Данный документ является переводом статьи "Web Style Sheets CSS tips & tricks".
Оригинальная версия документа существует только на сайте W3C http://www.w3.org/Style/Examples/007/roundshadow.html
Данный перевод НЕ является официальным документом W3C.
Все Авторские Права Принадлежат W3C.
Данный документ может содержать ошибки перевода и опечатки.
Автор перевода: Евгений Скрипец, который работает сейчас над проектом Speed Lab. Все переводы автора: en, ru, uk
Локальная версия: http://www.indeep76.com/Style/Example007/roundshadow.html

Закругленные & с тенью

Пять картинок

Результат

Закругленные углы и блоки с тенью

CSS3 будет обладать возможностью создавать закругленные края, края, состоящие из изображений и блоки с тенями, но при помощи определенных действий вы сможете имитировать некоторые из них уже с версией CSS2 — без каких-либо таблиц или дополнительного оформления.

Эта страница была придумана и создана Арве Берсвендсоном. У него есть много других интересных демонстраций CSS.

Разумеется, создание закругленных углов и теней будет упрощено в версии CSS3. Например, для того, что задать параграфу толстую красную границу с закругленными углами, вам понадобятся всего две линии CSS3, подобные этим:

P { border: solid thick red;
    border-radius: 1em }

А для того, чтобы добавить смазанную тень на половину еm ниже и правее параграфа, достаточно будет всего одной линии:

P { box-shadow: black 0.5em 0.5em 0.3em }

(Вы можете попробовать тут работает ли он.) Но если они нужны вам сейчас и сложность и недостаток гибкости для вас не препятствие, вы можете использовать технологию, описанную ниже. В конце концов, это будет отличным тестом для пользователей браузеров buggy …

Пять изображений на одном элементе

Главный трюк - использование сгенерированного контента '::before' и '::after') для помещения четырех дополнительных изображений в один элемент. '::before' псевдоэлемент может иметь фоновый и передний слой, '::after' псевдо элемент - также, а элемент сам может иметь фоновый слой в целом для пяти изображений.

Мы создаем пять PNG изображений и размещаем их в четырех углах и напротив правого края элемента. Вот изображения:

верхний левый угол:
top left corner
верхний край и верхний правый угол:
top right corner
средняя часть правый край:
background and right edge
нижний левый угол:
bottom left corner
нижний край и нижний правый угол:
bottom and bottom left corner

А вот правила CSS для их расположения:

blockquote {
    max-width: 620px;
    background: url(rs-right.png) right repeat-y }
blockquote::before {
    display: block;
    line-height: 0;
    background: url(rs-topright.png) top right no-repeat;
    content: url(rs-topleft.png) }
blockquote::after {
    display: block;
    line-height: 0;
    background: url(rs-bottomright.png) bottom right no-repeat;
    content: url(rs-bottomleft.png) }

Так как наш фоновый рисунок - 620px шириной, мы не можем позволить блоки шире 620px без интервалов. Поэтому тут есть свойство 'max-width'. Свойство 'display: block' необходимо для того, чтобы убедиться, что сгенерированный контент формирует собственные блоки сверху и снизу основного контента, вместо того, что помещаться на первой и последней строчке. Свойство 'line-height: 0' гарантирует, что сверху и снизу изображений останется место для надстрочных и подстрочных символов в свойстве 'content'.

Результат

А вот как оно выглядит:

Видите бледный зеленый блок с закругленными углами и тенью на белом фоне? Если нет, ваш браузер некорректно настроен для сгенерированного контента (или вообще не настроен).

Источник HTML должен быть следующим:

<blockquote>
<p>Видите бледный зеленый блок с закругленными углами 
и тенью на белом фоне? Если нет,
ваш браузер не корректно настроен для сгенерированного контента 
(или вобще не настроен).
</blockquote>

И если хотите проверить, сможет ли уже ваш браузер сделать это при помощи CSS3, вы можете попробовать тут.

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
создано 6 января 2004;
последнее обновление $Дата: 2007/07/20 16:19:10 $ GMT