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

Графические эффекты без графики • 87

теней), либо белый (для эффекта сияния) цвет, вы в любой момент можете сменить
фоновый цвет или изображение под падающей тенью, и вам не придется соответ-
ствующим образом менять настройки самой тени. Будет создаваться впечатление,
что ее цвет автоматически подстраивается под цвет и содержимое фона.

Добавив свойство box-shadow к правилу blockquote, сохраните страницу и от-
кройте ее в современном браузере — вы увидите нежную зеленовато-серую тень,
падающую чуть правее и ниже каждого из облачков с комментариями (рис. 2.21).
Обратите внимание, что форма тени повторяет скругленные углы полей и учитывает
значение border-radius.

Рис. 2.21. Свойство box-shadow позволяет добавить тени к облачкам с текстом

Наша падающая тень действительно создает
легкий эффект объема, однако его можно до- Для создания более сложных
полнительно усилить, заставив облачка с текстом теней используйте генератор
немного приподниматься при наведении указа- box-shadow, находящийся по
теля мыши. Чем дальше облачко от фона, тем адресу http://westciv.com/tools/
больше должна быть его тень. Для того чтобы boxshadows. К сожалению, он не
позволяет настраивать радиус
тень увеличивалась при наведении указателя размытия или создавать тень
мыши, добавьте следующее правило: внутри поля.
blockquote:hover {
top: -2px;
left: -2px;
-moz-box-shadow: 3px 3px 2px hsla(0,0%,0%,.3);
-webkit-box-shadow: 3px 3px 2px hsla(0,0%,0%,.3);
box-shadow: 3px 3px 2px hsla(0,0%,0%,.3);
}

www.trk.kg