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

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

же как созданные без помощи изображений скругленные углы. У градиентов,
сгенерированных CSS, есть и еще одно преимущество: в отличие от градиентных
изображений, они способны масштабироваться и подстраиваться под размер своих
контейнеров, что расширяет возможности их применения.
К сожалению, на момент написания этой главы градиенты CSS3 находятся на од-
ной из ранних стадий разработки; синтаксис спланирован только в редакторском
проекте W3C и не перешел еще даже на этап рабочего проекта или рекомендации
кандидата. Поэтому не забывайте, что, в отличие от остальных возможностей CSS3,
рассмотренных в этой книге, синтаксис градиентов с большой вероятностью в ско-
ром будущем претерпит значительные изменения. И все же мне кажется, что нет
ничего страшного в том, чтобы иногда использовать экспериментальную функцио-
нальность CSS — нужно только знать меру. Тогда не поддерживающие ее браузеры
ничуть не пострадают от ее отсутствия, а в поддерживающих страницы не будут
искажаться даже после изменения синтаксиса. В худшем (и очень маловероятном)
случае синтаксис кардинально поменяется и градиенты перестанут отображаться
во всех браузерах. Уверена, мы сможем пережить эту трагедию.
Создавать можно как линейные (прямые), так и радиальные (круглые или эллип-
тические) градиенты; в этом разделе мы сосредоточимся на линейных. Свойства
gradient не существует; для задания градиента используется функция linear-
gradient или radial-gradient, причем она передается в качестве значения любому
свойству, понимающему изображения, например background-image или list-
style-image (обратите внимание, что Firefox в настоящее время поддерживает
градиенты только со свойством background-image). Для определения линейного
градиента вы сообщаете браузеру начальную точку, угол и начальный и конечный
цвета. Между крайними цветами также можно добавлять дополнительные цвета,
указывая точное местоположение каждого из них на шкале градиента.
Звучит все просто, но, к сожалению, варианты синтаксиса градиентов в Firefox
и Webkit (единственные браузеры, которые в настоящий момент поддерживают
градиенты) сильно отличаются. Синтаксис Firefox совпадает с официальным син-
таксисом W3C; синтаксис Webkit был разработан раньше, он сложнее и содержит
множество отличий. Но это не единственная проблема: даже внутри отдельного
синтаксиса существует несколько вариаций задания одного и того же градиента,
в которых легко запутаться. Давайте начнем с самого простого и внедрим линейный
градиент в облачка с текстом, для того чтобы посмотреть на живой пример. После
этого можно будет нырять в глубины полного сложного синтаксиса.
Firefox и синтаксис W3C
Синтаксис Firefox повторяет официальный синтаксис, который в настоящее время
разрабатывается консорциумом W3C и в целом проще и понятнее, поэтому мы
начнем с градиентов в Firefox.
Во-первых, добавим линейный градиент для Firefox в свойство background-image
правила blockquote, применив функцию -moz-linear-gradient:

www.trk.kg