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

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

подроБнее о СинтакСиСе линейного градиента для wEbkIt
При создании линейного градиента в синтаксисе Webkit, для того чтобы добавить между
начальным и конечным цветами дополнительные цвета, вы используете такую запись:
color-stop(50%, #333). Здесь символы 50% указывают, в какой точке градиента должен
появиться новый цвет; также можно описать эту точку значением в диапазоне от 0 до 1.
#333 — это цветовое значение, которое можно записывать в любом синтаксисе. Описания
дополнительных цветов можно добавлять между начальным и конечным цветами или
после них, разделяя запятыми.
Еще подробнее о синтаксисе Webkit рассказывается в этих статьях:
• «Safari CSS Visual Effects Guide: Gradients» (http://developer.apple.com/library/
safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/
Gradients.html);
• «CSS gradient syntax: comparison of Mozilla and Webkit» автора Peter Gasston (http://www.
broken-links.com/2009/11/26/css-gradient-syntax-comparison-of-mozilla-and-webkit);
• «CSS gradient syntax: comparison of Mozilla and Webkit (Part 2)» автора Peter Gasston
(http://www.broken-links.com/2009/11/30/css-gradient-syntax-comparison-of-mozilla-
and-webkit-part-2).

Именно из-за падения производительности в браузерах на базе Webkit я рекомендую
либо полностью отказываться от использования альтернативного фонового изо-
бражения, и пусть устаревшие браузеры отображают сплошной фон, без градиента,
либо прятать запрос на загрузку фонового изо-
бражения от тех браузеров, которым оно не
Еще один способ имитации гра-
диента основывается на свойстве требуется, применяя для этого Modernizr (под-
box-shadow, с помощью которого робнее об этом расширении говорится в главе 1).
тень можно создать внутри поля. Если вы все же решите потратить силы и время
Оно поддерживается браузерами на создание и внедрение градиентного изобра-
гораздо лучше, чем градиенты жения, возможно лучше реализовать этот подход
CSS3 (хотя, конечно, не так хо- единообразно во всех браузерах и полностью
рошо, как старые добрые фоно- отказаться от градиентов CSS3. Единственно
вые изображения). Я подробнее правильного ответа здесь нет, но, по моему мне-
расскажу о свойстве box-shadow нию, нужно либо использовать только градиен-
далее в этой главе.
ты CSS3, либо не использовать их совсем и за-
гружать фоновые изображения.
Используйте сценарий. Для браузеров IE версий с 6 по 8 можно применить сце-
нарий PIE (http://css3pie.com/documentation/supported-css3-features). Для многих
других браузеров подойдет сценарий css-gradients-via-canvas автора Weston Ruter
(http://weston.ruter.net/projects/css-gradients-via-canvas). Он работает в тех браузе-
рах, которые поддерживают элемент HTML5 canvas, поэтому подходит для Firefox
2 и 3, а также Opera 9.64 и более поздних версий. Он не работает в IE, но его можно
использовать в сочетании с фильтром Gradient для IE. Это подводит нас к следую-
щему альтернативному варианту...

www.trk.kg