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

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

применения свойства text-shadow. Я не утверждаю, что падающие тени нужно
добавлять к любому тексту, встречающемуся на странице, — зачастую они лишь
ухудшают читаемость. Кроме того, всегда необходимо проверять и перепроверять,
не ухудшилось ли представление текста после добавления падающей тени. Тем не
менее свойство text-shadow — это еще один мощный инструмент в вашем арсена-
ле, который при правильном применении будет давать превосходные результаты.

Так как же правильно применять text-shadow?
Выделение текста за счет теней
Давайте сделаем так, чтобы свойство text-shadow включалось при наведении указа-
теля мыши, чтобы выбранный комментарий выделялся на фоне других, в том числе
за счет падающей тени. К правилу blockquote:hover добавьте следующую строку:
text-shadow: 1px 1px 1px hsla(0,0%,100%,.7);

Синтаксис почти идентичен синтаксису свойства
box-shadow (единственное отличие заключается Как и тени полей (box-shadow),
в том, что для text-shadow невозможно задать текстовые тени (text-shadow) смо-
радиус распространения или добавить ключевое трятся лучше, когда вы выбираете
слово inset). Здесь мы указали смещение по для них полупрозрачный цвет
горизонтали, смещение по вертикали, радиус в синтаксисе HSLA или RGBA.
размытия (это необязательный параметр) и цвет.
В данном случае необходимости добавлять уни-
кальный браузерный префикс нет — Firefox, Safari, Chrome и Opera поддерживают
стандартное свойство text-shadow. На рис. 2.23 вы видите легкую тень, которая
появляется позади текста из blockquote при наведении указателя мыши.

Страница со всеми изменения-
ми, которые мы внесли до этого
момента, называется speech-
bubble_3.html. Она находится в
той же папке, где и остальные
файлы упражнений из этой главы.

Рис. 2.23. Белая тень появляется чуть правее и ниже
текста в облачке, когда пользователь
подводит к нему указатель мыши

Также текстовая тень хорошо будет смотреться под именем комментатора и датой
комментария. Это два маленьких фрагмента текста, которые отображаются поверх
узорного фона. Очень светлая и четкая текстовая тень создаст легкий контур, за счет
которого текст будет лучше выделяться на фоне узора, и его будет удобнее читать.

www.trk.kg