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

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

• каждое описание цвета включает значение цвета (в любом синтаксисе) и, при не-
обходимости, точку на линии градиента, в которой этот цвет добавляется. Значение
отсчитывается от начальной точки градиента, которое необязательно совпадает с краем
поля (как на рис. 2.19, где градиент начинается на 40 пикселов ниже верхнего края поля).
Поскольку градиенты, определяемые внутри свойства background-image, по сути пред-
ставляют собой изображения, сгенерированные браузером, для управления ими можно
применять любые свойства CSS, относящиеся к фону. В целом их можно рассматривать как
обычные фоновые изображения. Например, используйте новое свойство CSS3 background-
size для задания размера градиента и background-repeat — для мозаичного размещения
образцов градиента.
Помимо добавления световых эффектов, градиенты CSS3 можно использовать для решения
следующих задач:
• создание скругленных поверхностей, напоминающих кнопки: http://webdesignerwall.
com/tutorials/css3-gradient-buttons и http://blog.brandoncash.net/post/525423850;
• добавление блеска поверхностям для имитации металла, стекла или компакт-диска;
• создание эффекта отражения (см. http://www.broken-links.com/2010/03/22/create-a-
studio-style-backdrop-with-css3);
• создание эффекта виньетки, т. е. затемнения углов изображения или поля, как бывает на
старых фотографиях (см. http://sickdesigner.com/index.php/2010/html-css/css3-vignette-
a-wicked-cool-technique);
• постепенное высветление или затемнение фонового изображения путем наложе-
ния градиента (см. http://atomicrobotdesign.com/blog/htmlcss/make-the-thinkgeek-
background-effect-using-css3);
• создание столбцов одинаковой высоты (см. http://aext.net/2010/08/css3-sidebar-full-
height-background-color).

Таблица 2.4. Поддержка градиентов в браузерах

IE Firefox Opera Safari Chrome
Нет Да, начиная с версии Нет Да, с префиксом Да, с префиксом
3.6, с префиксом -moz- -webkit- -webkit-

Во-первых, тип градиента — линейный или радиальный — задается внутри самой
функции -webkit-gradient, т. е. вам не нужно создавать отдельную функцию
linear-gradient или radial-gradient.
Следом за типом градиента вы указываете позицию начальной точки по горизонтали
и по вертикали (в нашем случае 0 0) и позицию конечной точки по горизонтали и по
вертикали (в нашем случае 0 30). Для этого можно использовать ключевые слова
(такие как top и left), процентные значения или значения в пикселах. Странно
только, что в последнем случае Webkit не допускает наличия символов px. Таким
образом, в нашем примере мы говорим Webkit, что градиент должен начинаться

www.trk.kg