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

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

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 изображений и размещаем их в четырех углах и напротив правого края элемента. Вот изображения:

верхний левый угол:

верхний край и верхний правый угол:

средняя часть правый край:

нижний левый угол:

нижний край и нижний правый угол:

А вот правила 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, вы можете попробовать тут.