Поддержка сайта

Высокие позиции в поисковой системе, на прямую зависят от развития вашего сайта.

Продвижение сайтов

Эффективность стратегий продвижения подтверждается сотрудничеством с крупными клиентами и отзывами о нашей работе.

Создание сайтов

Мы делаем сайты быстро, недорого и профессионально. От работы с нами, у вас останутся только положительные эмоции.

Синтаксис по стандарту W3C

.

Синтаксис по стандарту W3C

Так выглядит запись, создающая линейный градиент:

background-image:  linear-gradient ( … );

В этих круглых скобках следует указать вектор градиента и ключевые точки. Вектор задается либо углом в градусах, либо начальной точкой (указанием стороны или угла). В последнем случае вектор будет строиться по направлению к противолежащему углу или стороне. При задании вектора величиной угла в ірадусах 0 соответствует направлению слева направо, 90 — вверх и т. д., против часовой стрелки.

Для указания начальной точки используются ключевые слова top, bottom, left и right (верх, низ, лево и право).

Указав вектор, нужно обозначить ключевые точки; они состоят из цвета и значения в процентах, показывающего, на каком отрезке вектора расположена данная точка.

Так много информации, что уже пора ее как-то проиллюстрировать. Давайте сделаем простейший градиент, в котором белый цвет #FFF будет переходить в черный #000.

Чтобы градиент был направлен сверху донизу элемента, как показано на рисунке 7.3, вы можете использовать любой из приведенных вариантов (в наших примерах используется префикс -moz-, но с таким же успехом это может быть -webkit- или -о-):

Синтаксис по стандарту W3C

Синтаксис по стандарту W3C

Рис. 7.3. Бело-черный градиент от верхней до нижней границы элемента

Последний вариант будет работать, поскольку вектор, направленный сверху вниз, считается вектором по умолчанию.

Поскольку первая ключевая точка расположена на отметке 0%, а последняя — на 100%, эти значения можно опустить, результат не изменится:

background-image:  -moz-linear-gradient(#FFF,   #000);

Давайте усложним задачу. Пусть вектор будет расположен под углом, а ключевых точек будет три.

Предположим, мы хотим задан, градиент, изменяющийся от белого до черного и обратно:

Синтаксис по стандарту W3C

Мы поместили ключевую точку на 75% длины вектора, поэтому белая полоса оказалась ближе к концу, как видно из рис. 7.4.

Синтаксис по стандарту W3C

Рис. 7.4. Градиент с тремя ключевыми точками

Начальная точка не обязательно должна совпадать с 0%, так же как и конечная не обязана совпадать со 100%. Все пространство между 0% и первой ключевой точкой будет цвета первой точки (аналогично, все пространство между последней ключевой точкой и концом элемента будет иметь цвет последней ключевой точки). Вот пример:

Синтаксис по стандарту W3C

Получившийся градиент показан на рис. 7.5.

Синтаксис по стандарту W3C

Рис. 7.5. Градиент, ограниченный узкими полосами сплошного цвета, полученными в результате смещения ключевых точек относительно концов вектора

Позиции ключевых точек, вообще говоря, можно и не указывать. В таком случае считается, что они равномерно распределены вдоль вектора:

Синтаксис по стандарту W3C

Синтаксис по стандарту W3C

Любой из приведенных примеров создает довольно некрасивую угловую радугу. Обратите внимание, что мы добавили отступы и переносы строк — это не имеет значения для конечного результата.

Цвета плавно сменяют друг друга. Однако если мы поместим их в одну позицию, изменение будет резким. Таким способом можно создать эффект фонового изображения, состоящего из полос (рис. 7.6).

Синтаксис по стандарту W3C

Рис. 7.6. Точное позиционирование ключевых точек позволяет получить полосатый фон

Вот стиль, с помощью которого получен данный результат:

Синтаксис по стандарту W3C

Синтаксис по стандарту W3C

В очень недалеком будущем вышеописанного будет достаточно для работы с градиентами. Но пока еще оно не настало…


.

Читайте так же:
Not found