Градиенты в CSS. Взгляд на CSS3 градиент (линейный и радиальный градиенты)

08.07.2019

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

Раньше, для создания эффекта градиента использовались фоновые изображения. Теперь для создания градиентного фона можно использовать CSS3. Элементы с установленными с помощью CSS3 градиентами выглядят лучше при увеличении, чем их аналоги - подключаемые фоновые изображения, так как градиент генерируется браузером непосредственно под указанную область.

Обратите внимание, что CSS градиент является фоновым изображением создаваемым браузером, а не фоновым цветом, поэтому он определяется как значение свойства background-image . Это означает, что градиент можно указывать не только в качестве значения свойства background-image, но и везде, где можно вставлять фоновое изображение, например в list-style-image и background .

CSS3 определяет два типа градиентов:

Линейный градиент (Linear Gradient) - плавный переход от цвета к цвету по прямой линии.
Радиальный градиент (Radial Gradient) - плавный переход от цвета к цвету из одной точки во все направления.

Линейный градиент

Линейный градиент распространяется по прямой линии, демонстрируя плавный переход от одного оттенка цвета к другому. Линейный градиент создаётся с помощью функции linear-gradient(). Функция создаёт изображение, которое представляет собой линейный градиент между указанными оттенками цветов. Размер градиента соответствует размеру элемента, к которому он применён.

Функция linear-gradient() принимает следующие, разделяемые запятой, аргументы:

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

Простейший линейный градиент требует только два аргумента, определяющие начальный и конечный цвет:

Div { background-image: linear-gradient(black, white); width: 200px; height: 200px; } Попробовать »

При передаче функции двух аргументов устанавливается вертикальный градиент с начальной точкой сверху.

Направление линии градиента может быть определено двумя способами:

Использование градусов В качестве первого аргумента можно передать градус угла линии градиента, определяющий направление градиента, так например, угол 0deg (deg сокращение от англ degree - градус) определяет линию градиента от нижней границы элемента к верхней, угол 90deg определяет линию градиента слева на право и т.д. Проще говоря, положительные углы представляют собой вращение по часовой стрелке, отрицательные соответственно против часов. Использование ключевых слов В качестве первого аргумента могут также передаваться ключевые слова "to top", "to right", "to bottom" или "to left", они представляют собой углы линий градиентов "0deg" "90deg" "180deg" "270deg" соответственно.

Угол можно так же задать с помощью двух ключевых слов, например, to top right - линия градиента направлена в верхний правый угол.

Пример градиента заданного в разных направлениях:

Div { margin: 10px; width: 200px; height: 200px; float: left; } #one { background-image: linear-gradient(to left, black, red); } #two { background-image: linear-gradient(to top left, black, red); } #three { background-image: linear-gradient(65deg, black, yellow); } Попробовать »

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

Div { margin: 10px; width: 200px; height: 200px; float: left; } #one { background-image: linear-gradient(to right, red, blue, yellow); } #two { background-image: linear-gradient(to top left, blue, white, blue); } Попробовать »

После цвета допускается указывать стоп позицию для него, которая определяет место расположение цвета (где один цвет начинает переходить в другой) относительно начальной и конечной точки градиента. Стоп позиция указывается с помощью единиц измерения поддерживаемых в CSS или с помощью процентов. При использовании процентов, расположение стоп позиции вычисляется в зависимости от длины линии градиента. Значение 0% является начальной точкой градиента, 100% - конечной.

Div { margin: 10px; width: 200px; height: 200px; float: left; } #one { background-image: linear-gradient(to top right, blue, white 70%, blue); } #two { background-image: linear-gradient(to right bottom, yellow 10%, white, red, black 90%);} #three { background-image: linear-gradient(to right, black 10%, yellow, black 90%); } Попробовать »

Значение цвета можно указывать различными способами, например: указать имя цвета, использовать шестнадцатеричные значения (HEX), с помощью синтаксиса RGB (RGBA) или HSL (HSLA). Например, использование градиента с прозрачностью может быть использовано в сочетании с фоновым цветом или изображением, расположенным под градиентом для создания интересных визуальных эффектов:

Div { margin: 10px; width: 300px; height: 100px; background-color: green; } #one { background: linear-gradient(to left, rgb(255,255,0), rgba(255,255,0,0)); } #two { background: linear-gradient(rgb(255,255,255), rgba(255,255,255,0)); }

Цветовой градиент - это плавный переход от одного заданного цвета к другому через промежуточные цвета. В линейном градиенте переход происходит по прямой, от точки A к точке B . Градиент может иметь и более двух опорных точек - тогда переход совершается от точки A к точке B , затем от точки B к точке C и так далее.

Как сделать фоновый линейный градиент в CSS

В CSS3 вы можете добавлять градиентный фон к элементам через уже известное свойство background-image . В качестве значения используется ключевое слово linear-gradient() , где в скобках необходимо указать стартовую точку градиента, начальный цвет и конечный цвет.

Например, давайте сделаем фоновый линейный градиент с переходом от фиолетового цвета к красному. При этом мы хотим, чтобы начальная точка с фиолетовым цветом была с правой стороны, а вектор градиента направлялся влево. Запишем код:

Background-image: linear-gradient(to left, violet, red); Фоновый градиент на блоке

400×400px

Цвета точек градиента можно записывать в любом формате, доступном в CSS, будь-то шестнадцатеричный код, формат RGB или другой. Направление градиента задается с помощью приставки to и затем ключевых слов left , right , top и bottom , которые можно комбинировать для изменения наклона. Например:

Background-image: linear-gradient(to bottom right, #ee82ee, #ff0000);

Кроме этого, можно прямо указать угол наклона, использовав положительное либо отрицательное число с приставкой deg (без пробела). При заданном угле 0º либо 360º градиентная линия будет идти снизу вверх. При увеличении угла наклона движение вектора происходит по часовой стрелке (при использовании отрицательного значения движение меняется на противоположное). Пример записи кода:

Background-image: linear-gradient(-110deg, #ee82ee, #ff0000);

Несколько опорных точек

Как мы уже сказали, у градиента может быть более двух опорных точек. При этом фон будет плавно переходить от первого цвета ко второму, от второго к третьему, от третьего к четвертому и так далее, пока не достигнет финальной опорной точки. Если вы хотите увеличить количество данных точек в градиенте, просто допишите их через запятую. Например:

Background-image: linear-gradient(145deg, #ee82ee, slateblue, #ffd86a, purple);

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

Длина переходов

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

Background-image: linear-gradient(#92009b 20%, #f5e944 90%, #00ffa2);

В нашем коде после цвета #92009b указано значение 20% . Поскольку оно стоит возле первой опорной точки, это означает, что указанным цветом будет закрашено 20% длины элемента. После чего уже начинается градиент: значение 90% говорит браузеру, что нужно достичь цвета #f5e944 к 90% длины элемента (начав на уровне 20%). После чего в оставшемся пространстве начинается переход к третьему цвету - #00ffa2 .

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

Вендорные префиксы

Для обеспечения кроссбраузерности к некоторым поздним CSS-свойствам нужно дописывать вендорные префиксы - специальные приставки, которые добавляют разработчики браузеров:

-webkit- - префикс для Chrome, Safari, Android;
-moz- - префикс для Firefox;
-o- - префикс для Opera.

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

Background-image: -webkit-linear-gradient(left, violet, red); background-image: -moz-linear-gradient(left, violet, red); background-image: -o-linear-gradient(left, violet, red); background-image: linear-gradient(to left, violet, red);

Для добавления префикса требуется создавать отдельное объявление. Кроме того, как вы могли заметить, свойства с вендорными префиксами не требуют использования приставки to при указании направления градиента.

Поддержка Internet Explorer

К сожалению, градиентный фон работает только в IE10+. Предыдущие версии не понимают его и будут игнорировать. Чтобы обеспечить хотя бы обычный фон в старых браузерах, можно создать т. н. «заглушку»: выберите подходящий оттенок и запишите свойство background-color над свойством с градиентом. Таким образом, старый браузер применит «резервный» фоновый цвет, а неизвестные ему свойства пропустит, тогда как в более современном браузере градиентный фон наложится на сплошной фон и перекроет его.

Если же у вас установлен полупрозрачный градиент (например, с использованием цветового формата RGBA) и вы не хотите, чтобы сквозь него просвечивался резервный фон-заглушка, задавайте градиент через сокращенное свойство background вместо background-image . Тогда значение background-color будет перезаписано на transparent .

Далее в учебнике: repeating-linear-gradient() - повторяющийся линейный градиент.

a! Градиент является прекрасным инструментом манипуляции с цветом в CSS3 . Вместо того, чтобы использовать изображение, для создания эффекта градиента на веб-странице, куда выгодней будет воспользоваться CSS3 градиентом и тем самым «облегчить» сайт. Так как пользователю не нужно будет тратить времени и трафика на загрузку фонового изображения. Существует два основных вида градиента: радиальный и линейный. Сегодняшний пост будет именно о них.

Линейный градиент

Как говориться в классификации, градиенты в CSS3 являются изображениями. Для них нет специальных свойств. А для объявления используется свойство фонового изображения.

В общем случае синтаксис градиента (линейного) выглядит так:

1
2
3
4
5
6
7

div {
background-image : -webkit-linear-gradient(top , #FF5A00 0% , #FFAE00 100% ) ;
background-image : -moz-linear-gradient(top , #FF5A00 0% , #FFAE00 100% ) ;
background-image : -ms-linear-gradient(top , #FF5A00 0% , #FFAE00 100% ) ;
background-image : -o-linear-gradient(top , #FF5A00 0% , #FFAE00 100% ) ;

}

Итак, давайте обо всем по порядку.

Прежде всего, линейный градиент объявлен функцией linear-gradient() . Функция имеет три основных значения. Первое значение определяет исходное положение. В примере указано top т.е. исходное положение сверху. Можно также использовать bottom , left и right ;

Если угол будет отрицательным то позиция смениться с нижнего левого угла на верхний левый.

Второе значение функции это начальный цвет и его стоп позиция, которая указана в процентах. Объявление данной позиции не обязательно, браузер по умолчанию присвоит первому цвету значение 0% .

Последним значением является второй цвет и его стоп позиция. По умолчанию принимает значение 100% . Эти крайние значения и они подразумевают, что первый цвет сразу начинает переходить во второй. Однако, если мы установим для первого цвета 50% , то он только с середины доступной высоты начнет переходить во второй. Вот так выглядит код:

Получаем одинаковые по высоте полоски. C четкой границей, перехода цвета не будет. Чтобы лучше понять как это работает поэкспериментируйте со значениями.

Радиальный градиент также как и линейный объявляется функцией, только уже radial-gradient() . Также есть и основные значения: это форма радиального градиента (circle — круг или ellipse — эллипс), начальный и конечный цвет. Синтаксис следующий:

div {
background : radial-gradient (circle , #F9E497 , #FFAE00 ) ;
}

Если не указывать форму, то по-умолчанию будет установлен эллипс.

Также по-умолчанию установлена центральная позиция градиента, ее можно изменить. Позицию можно задать командами (top , bottom , left , right и center ), а также их комбинациями, либо указать в процентах или пикселях.

Комбинации команд:

По центру вверху — top — 50% 0%;
В левом верхнем углу — left top — 0% 0%;
В правом верхнем углу — right top — 100% 0%;
По центру — center — 50% 50%;
Слева по центру — left center — 0% 50%;
Справа по центру — right center — 100% 50%;
По центру снизу — bottom — 50% 100%;
В левом нижнем углу — left bottom — 0% 100%;
В правом нижнем углу — right bottom — 100% 100%.

Вот пример с процентами:

div {
background-image : radial-gradient (70% 20% , circle , #F9E497 , #FFAE00 ) ;
}

Первое значение по оси Х второе по У .

Также радиальному градиенту можно задавать размер. Размер указывается через пробел после формы градиента. По-умолчанию применяется farthest-corner (к дальнему углу). Расчет ведется от центральной точки градиента до:

Чтобы, это лучше понять рассмотрим на примере. Градиент эллиптической формы с белым начальным и конечным синим цветом:

div {
background-image : radial-gradient (230px 50px , ellipse closest-side, white , blue ) ;
}

Размер рассчитывается из расстояния до ближних сторон, очевидно что верхняя ближе по оси Y и левая по оси X .

А теперь до дальних сторон:

div {
background-image : radial-gradient (230px 50px , ellipse farthest-side, white , blue ) ;
}

Результат, как говорится на лицо. Размер исчисляется из расстояния до дальних сторон.

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

div {
background-image : linear-gradient(top , rgba (255 , 90 , 0 , 0.2 ) , rgba (255 , 174 , 0 , 0.2 ) ) ;
}

Альфа канал, тот что последний и равен 0.2 указывает на то, что от 100% цвета используется только 20%.

В обоих видах CSS3 градиента можно использовать не два, а несколько цветов.

div {
background-image : linear-gradient(top , red , orange , yellow , green , blue , indigo , violet ) ;
}

Для обоих видов можно использовать повторение цветов. То есть, из данных значений образуется цикл. Функции повторяющегося градиента, repeating-linear-gradient() — для линейного и repeating-radial-gradient() — для радиального.

div {
background-image : repeating-radial-gradient (red , blue 20px , red 40px ) ;
}

0% , #FFAE00 100% ) ; /* для Firefox */
background-image : -ms-linear-gradient(top , #FF5A00 0% , #FFAE00 100% ) ; /* для IE 10+ */
background-image : -o-linear-gradient(top , #FF5A00 0% , #FFAE00 100% ) ; /* для Opera */
background-image : linear-gradient(top , #FF5A00 0% , #FFAE00 100% ) ; /* стандартный синтаксис */
}