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

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

dev.opera.com/articles/view/cross-browser-box-shadows, в которой дополнительно
рассматривается применение фильтра Blur для имитации тени внутри поля. До-
полнительные элементы HTML, необходимые для реализации перечисленных выше
эффектов, — допустимый компромисс в ситуации, когда наличие падающих теней
в IE обязательно. Однако, по моему мнению, в нашем примере с комментариями
в облачках такое незначительное украшение не стоит дополнительной работы и
раздутого из-за лишних блоков div файла. Таким образом, мы не будем применять
фильтр Blur и пытаться реализовать нужный эффект в IE; нас вполне устраивают
облачка без падающих теней.

текСтовая тень Без изоБражений
Почему все самые интересные эффекты должны применяться только к полям — разве
у текста не может быть падающих теней? К счастью для нас, в CSS3 есть свойство,
предназначенное именно для этого, с предсказуемым названием text-shadow.
Что касается доступности содержимого страницы и удобства использования,
свойство text-shadow обеспечивает приятные преимущества. В этой главе мы пока
что рассматривали графические эффекты, в которых декоративные изображения
заменялись эквивалентом на основе CSS3: например, вместо того чтобы добавлять
изображение скругленного угла в формате GIF, мы генерировали его с помощью кода
CSS. Фактически мы использовали псевдоизображения вместо настоящих изобра-
жений. С другой стороны, свойство text-shadow позволяет заменять изображения
текста реальным текстом. Например, вы хотите добавить на страницу заголовок с
падающей тенью. Раньше приходилось создавать изображение заголовка со всеми
эффектами, включая тень, и выводить его наверху страницы. У пользователя не
было никаких возможностей настроить этот текст в соответствии с собственными
нуждами: он не мог масштабировать его, поменять цвет или шрифт — никакие
действия по редактированию текста ему доступны не были. Благодаря свойству
text-shadow и возможности использовать реальный текст, контроль снова воз-
вращается в руки пользователя.
Реальный текст с эффектами, добавленными с помощью text-shadow, делает текст
более читаемым за счет повышения контраста между символами и фоном. Вы
когда-нибудь смотрели фильмы с субтитрами? У текста на экране наверняка была
небольшая тень или цветной контур, благодаря которым он выделялся на фоне
картинки с постоянно меняющимися цветами. Легкая падающая тень позади текста
на веб-страницах точно так же повышает удобочитаемость.
Другие преимущества реального текста включают возможность поиска, выделения,
копирования и вставки, к тому же вы или ваш клиент тратите на редактирование
текста гораздо меньше времени, чем потребовалось бы для изменения картинки
или Flash-ролика.
Разумеется, как и в случае со многими другими веб-технологиями, возможны опре-
деленные побочные эффекты и снижение удобства в использовании из-за ошибок

www.trk.kg