Page 86 - Сила CSS3 Освой новейший стандарт

86 • Глава 2. Облачка с текстом

соответствующая команда отсутствует. Если в главное правило blockquote добав-
ляется фоновое изображение (например, в качестве альтернативы градиенту), то
не забудьте вставить строку background: none; в правило для IE 8.

падающая тень Без изоБражений
Продолжая действовать в духе трехмерности, можно в качестве очередного шага
к совершенству добавить позади каждого из облачков с текстом падающую тень.
И снова мы сделаем это без использования изображений.
Падающие тени для полей создаются в CSS3 с помощью свойства box-shadow. Вы
задаете смещение тени относительно поля по горизонтали и по вертикали, ее цвет
и, при желании, радиус размытия и радиус распространения.
Добавьте к правилу blockquote следующие три строки кода CSS:
-moz-box-shadow: 1px 1px 2px hsla(0,0%,0%,.3);
-webkit-box-shadow: 1px 1px 2px hsla(0,0%,0%,.3);
box-shadow: 1px 1px 2px hsla(0,0%,0%,.3);
Как и в примере с border-radius, все три строки делают одно и то же, просто их
считывают разные браузеры: на момент написания этой главы свойство box-shadow
без префикса работает только в IE 9 и Opera.

Первое значение каждого свойства, 1px, представляет смещение тени относительно
поля по горизонтали — в данном случае оно приказывает браузеру сместить тень
на один пиксел вправо. Второе значение, 1px, — это смещение по вертикали, сдви-
гающее тень на один пиксел вниз. Можно указывать и отрицательные значения;
они сдвигают тень влево и вверх.
Третье значение, 2px, — это радиус размытия, указывающий, на какое количество
пикселов растягивается тень. Большие значения делают тень более мягкой и раз-
мытой, а нулевое значение соответствует тени с очень четкими краями.
Четвертое значение описывает цвет — в данном случае черный с 30% непрозрачно-
стью. Для объявления цвета в box-shadow можно использовать любой синтаксис, но
я рекомендую выбирать либо HSLA, либо RGBA —
Числовые значения в определе- два синтаксиса, позволяющие задавать степень
нии свойства box-shadow должны прозрачности цвета. Полупрозрачные тени смо-
следовать точно в том порядке, трятся лучше всего, так как не закрывают собой
как указано выше, однако цве- фоновый объект. Если сделать тень, например,
товое значение необязательно серой и абсолютно непрозрачной, а затем поме-
должно занимать последнее нять фоновый цвет страницы на темно-синий, то
место. При желании цвет можно в результате вы увидите светло-серую тень поверх
указать первым. темно-синего фона. В действительности тень в
такой ситуации должна быть тоже синей, причем
еще темнее фона — именно так она бы выглядела в реальной жизни. Используя для
описания падающих теней синтаксис HSLA или RGBA и выбирая либо черный (для

www.trk.kg