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

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

blockquote {
position: relative; Разрывы строк в этой градиент-
min-height: 40px; ной функции добавлены исклю-
margin: 0 0 0 112px; чительно для удобства чтения.
padding: 10px 15px 5px 15px; Как и в любом другом коде CSS,
-moz-border-radius: 20px; в описании градиентов переносы
-webkit-border-radius: 20px;
border-radius: 20px; строк можно добавлять и удалять,
border-top: 1px solid #fff; руководствуясь собственными
background-color: hsla(182,44%,76%,.5); предпочтениями, и это никак не
background-image: -moz-linear-gradient( повлияет на функциональность.
hsla(0,0%,100%,.6),
hsla(0,0%,100%,0) 30px
);
word-wrap: break-word;
}

Мы видим здесь описание начального цвета (hsla(0,0%,100%,.6)), конечного цвета
(hsla(0,0%,100%,0)) и позиции конечного цвета (30px). Так как мы не задали кон-
кретную начальную точку и угол градиента, Firefox попросту использует значения
по умолчанию: градиент начинается наверху поля и продолжается вертикально
вниз. (Если бы мы решили указать начальную точку и/или угол, это нужно было
бы делать в начале функции. Полный синтаксис приведен во врезке «Коротко о ли-
нейных градиентах».)
Начальный цвет — белый, непрозрачный на 60%, а конечный — тоже белый, но не-
прозрачный на 0%, т. е. абсолютно прозрачный. Наложение полупрозрачного бело-
го цвета на фоновый дает в результате нежный оттенок фонового цвета. В данном
случае градиент начинается сверху очень светлым голубым оттенком, а ближе
к нижнему краю комментария полностью исчезает (рис. 2.18). Можно было бы,
конечно, задать настоящий оттенок синего цве-
та соответствующим кодом, но использование
полупрозрачного белого в синтаксисе HSLA или
RGBA — вариант намного более гибкий. Если
позднее мы решим поменять фоновый цвет об-
лачков с комментариями, например на оранже-
вый, то нам не придется и для градиента вы-
бирать подходящий светло-оранжевый цвет.
Поскольку градиент белый, на экране он всегда Рис. 2.18. Градиент поверх
будет давать оттенок фонового цвета. Полупро- фонового цвета делает
облачка с текстом более
зрачный белый или черный цвет — это всегда объемными
самое оптимальное решение при создании от-
тенков и нюансов цветов.
Сразу за цветовым значением в коде CSS следует пробел и значение 30px. Так мы гово-
рим Firefox, что отображение конечного цвета должно начинаться через 30 пикселов от
верхнего края градиента. Градиент начинается сверху, и градиентная заливка продол-

www.trk.kg