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

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

коротко о линейных градиентах
Градиентные модули входят в черновой модуль Image Values (Значения изображений),
который вы найдете на странице http://dev.w3.org/csswg/css3-images/#gradients-; адрес
основной страницы завершенного модуля — http://www.w3.org/TR/css3-images.
Для задания градиента нужно передать функцию linear-gradient или radial-gradient любо-
му свойству, принимающему изображения в качестве значения. Диаграмма на рис. 2.19
представляет все возможные составляющие синтаксиса градиента функции linear-gradient.
Позиция Срединный Расстояние от начальной
по вертикали цвет точки Расстояние от начальной
Позиция Начальный Конечный точки
по горизонтали цвет цвет

linear-gradient(0 40px 270 deg, #000, #f 60px, #000033 80%)

Начальная точка Угол Описание Описание
цвета цвета
Рис. 2.19. Все возможные составляющие функции линейного градиента показаны
поверх градиента, определяемого указанными значениями

Необязательно использовать все составляющие, перечисленные на рис. 2.19. Важно только
помнить о следующих тонкостях:
• для того чтобы градиент заработал, достаточно указать два цвета (в любом синтаксисе).
Остальные составляющие, перечисленные на рис. 2.19, добавляются по желанию. Если
они отсутствуют, функция просто использует значения по умолчанию;
• если не указывать позицию цветов и угол градиента, то градиент выводится сверху вниз;
• начальную точку градиента в начале функции можно задавать либо ключевым словом
(например, center), либо в числовом формате (например, 20px, или 60%, или 1em), при-
чем числа могут быть отрицательными. При этом в числовом формате первое значение
обозначает точку начала градиента по горизонтали (по оси x), а второе — начальную
точку по вертикали (по оси y);
• после начальной точки (если вы решили ее указать) можно добавить угол наклона гра-
диента. Угол измеряется между линией горизонта и линией градиента против часовой
стрелки. Например, 0deg обозначает градиент, следующий слева направо, 90deg —
снизу вверх, 180deg — справа налево, а 270deg — сверху вниз. Можно использовать
также и отрицательные значения;

www.trk.kg