154. Добавляем градиент к фону элемента

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

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

background: linear-gradient(угол или позиция, цвет1, цвет2);

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

background: linear-gradient(45deg, #000000, #FFFFFF);  

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

1. to top – снизу вверх;
2. to bottom – сверху вниз;
3. to left – справа налево;
4. to right – слева направо;
5. to top left – от правого нижнего угла к левому верхнему;
6. to bottom left – от правого верхнего угла к левому нижнему;
7. to top right – от левого нижнего угла к правому верхнему;
8. to bottom right – от левого верхнего угла к правому нижнему.

Далее пример применения позиции, вместо угла:

background: linear-gradient(to top right, #000000, #FFFFFF);

Вторым значением в функции linear-gradient() устанавливается цвет, а точнее два и более цвета через запятую в любом из следующих форматов: шестнадцатеричный код, название цвета, RGB, RGBA, HSL или HSLA.

Радиальный градиент

Изощренным веб-дизайнерам может быть недостаточно линейного градиента, поэтому, чтобы создавать более необычные переливы цвета есть функция radial-gradient(). В отличие от линейного градиента, радиальный задает переход цвета по кругу, около одной точки. Синтаксис в целом похож, но есть отличия. Для работы этой функции необходимо задать форму (круг или эллипс), начальную точку, которая является центром фигуры и конечную точку, которая укажет край фигуры. Простой пример:

background: radial-gradient(circle, #fff, #000); 

Рассмотрим упрощенный синтаксис функции radial-gradient():

radial-gradient(форма, цвет1, цвет2)  

Первым значением функции radial-gradient()задается форма градиента:

1. circle – круг;
2. ellipse – эллипс.

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

1. left top = top left – левый верхний угол;
2. top = top center = center top – вверху по центру;
3. right top = top right – правый верхний угол;
4. left = center left = left center – слева по центру;
5. center – по центру (по умолчанию);
6. right = center right = right center – справа по центру;
7. bottom left = left bottom – слева внизу;
8. bottom = center bottom = bottom center – внизу по центру;
9. bottom right = right bottom – правый нижний угол.

Например:

background: radial-gradient(circle at top, #fff 30px, #000 40px)  

Для градиента в форме круга можно устанавливать радиус, а для эллипса радиус по оси x и оси y. Для этого нужно через пробел, после названия формы указать размеры. Для примера укажем радиус для круга 20 пикселей, а для эллипса 30 пикселей по оси x и 25 пикселей по оси y:

background: radial-gradient(circle 20px, #fff, #000);
background: radial-gradient(ellipse 30px 25px, #fff, #000);  

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

background: radial-gradient(circle 20px at top left, #fff, #000); 

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

1. closest-side – для эллипса, градиент совпадает одновременно с ближайшими вертикальной и горизонтальной сторонами, а для круга, с ближайшей к нему стороной;
2. closest-corner – вычисление основывается на информации о ближайшем угле блока;
3. farthest-side – то же самое, что и closest-side, только градиент растягивается до противоположной стороны блока;
4. farthest-corner – вычисление основывается на информации о дальнем угле блока.

Приведем пример:

background: radial-gradient(circle closest-side, #FFF, #000); 

Мы рассмотрели два вида градиента, которые есть в CSS. Для фронтенд-разработчика уверенное использование градиентов просто необходимо. Самый распространенный пример применения линейного и радиального градиента, это оформление кнопок.

Похожие уроки и записи блога

1. Используя линейный градиент, сделайте цветовой спектр температур, для этого используйте следующие семь цветов: #EF251F #F6911F #FFEB01 #FFFFFF #C2DEF4 #7FC3EA #2F4BA2 (использовать необходимо в том же порядке, как перечислено в задании).
2. Направление вектора слева направо (задать буквенным обозначением).

– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте.

– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить на любом популярном форуме в интернете.