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

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

в левом верхнем углу (0 пикселов вправо и 0 пикселов вниз от точки начала от-
счета) и заканчиваться на 30 пикселов ниже без смещения по горизонтали. Таким
образом, градиент равномерно заполняет верхние 30 пикселов поля, а оставшаяся
часть поля заливается конечным цветом, так же как в Firefox.
За начальной и конечной точками следуют начальный и конечный цвета. Как и в
Firefox, вы можете остановить свой выбор на любом цветовом синтаксисе, однако
обратите внимание, что непосредственно перед значением цвета необходимо до-
бавлять слова from и to.
Результат визуализации этого кода CSS с функцией -webkit-gradient должен вы-
глядеть так же, как на рис. 2.18.
Детали различий синтаксиса CSS в спецификациях Firefox и Webkit может быть
сложно запомнить. К счастью, это совершенно необязательно. В Сети вы найдете
несколько отличных инструментов генерации кода градиента. Сам градиент соз-
дается в визуальном редакторе, а вам остается только скопировать код и вставить
в свою таблицу стилей. Вот несколько подобных инструментов: http://gradients.
glrzad.com, http://westciv.com/tools/gradients, http://westciv.com/tools/radialgradients,
http://www.display-inline.fr/projects/css-gradient.

Обходные пути для не поддерживающих градиенты браузеров
Код CSS из предыдущих двух разделов работает только в Safari, Chrome и Firefox
версии 3.6 и более поздних, так как градиенты — это одна из возможностей CSS3
с самым низким уровнем поддержки в браузерах. Однако это также одна из тех воз-
можностей, для которых проще всего предусмотреть замену в не поддерживающих
браузерах. (Имеется в виду — на тот случай, если вы решите, что замена необходима.
В большинстве случаев достаточно бывает заливки сплошным фоновым цветом.)
Нарисуйте его. Самый очевидный обходной путь для не поддерживающих гради-
енты браузеров — пойти по давно проторенной дорожке и создать фактическое
изображение градиента в файле PNG с прозрачностью в альфа-канале. После этого в
blockquote выберите данное изображение в качестве фонового и повторите несколь-
ко раз по горизонтали для заполнения всей области. Не забудьте только, что объяв-
ление этого изображения должно предшествовать двум объявлениям background-
image, содержащим функции -moz-linear-gradient и -webkit-gradient. Таким
образом, браузеры, поддерживающие градиенты, смогут переопределить первое
свойство background-image (с изображением) вторым, создающим градиент CSS3.
Разумеется, создание и добавление на страницу изображения градиента сводит
на нет преимущества генерирования градиента с помощью CSS3. Firefox 3.6 не за-
гружает ненужные изображения, но Safari и Chrome загружают все перечисленные
изображения, несмотря на то что некоторые никогда не выводятся на страницу,
а градиент создается средствами CSS3. Таким образом, в Firefox 3.6 выигрыш
в производительности сохраняется, но в Safari этого не происходит. Разумеется,
ваши пользователи все так же могут наслаждаться остальными преимуществами
градиентов CSS3, но не самым важным.

www.trk.kg