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

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

жается вниз 30 пикселов, а затем все остальное пространство заполняется конечным
цветом. Поскольку конечный цвет полностью прозрачный, создается впечатление,
что градиент покрывает только верхние 30 пикселов облачка с комментарием.
Вот и все, что нужно сделать для создания градиента в Firefox. В обычной ситуации
для создания в конце данного блока второго объявления, не привязанного к браузе-
ру, я бы посоветовала вам просто-напросто скопировать объявление background-
image и удалить из копии частичку -moz-. Однако в данном случае официальный
синтаксис еще совершенно не проработан, поэтому лучше оставить все как есть
и подождать более-менее завершенной версии. Итак, синтаксис для Firefox готов,
так что давайте добавим синтаксис для Webkit.

Синтаксис для Webkit
Для браузеров на основе Webkit добавьте в правило blockquote еще одно объявление
background-image, на этот раз содержащее функцию -webkit-gradient:

blockquote {
position: relative;
min-height: 40px;
margin: 0 0 0 112px;
padding: 10px 15px 5px 15px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
border-top: 1px solid #fff;
background-color: hsla(169,41%,76%,.5);
background-image: -moz-linear-gradient(hsla(0,0%,
¬ 100%,.6), hsla(0,0%,100%,0) 30px);
background-image: -webkit-gradient(linear,
0 0, 0 30,
from(hsla(0,0%,100%,.6)),
to(hsla(0,0%,100%,0))
);
word-wrap: break-word;
}

Как вы видите, синтаксис 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);
• «CSS gradients in Firefox 3.6» автора Alix Franquet (http://hacks.mozilla.org/2009/11/css-
gradients-firefox-36).

www.trk.kg