» » linear-gradient -Линейный градиент
55 0  

linear-gradient -Линейный градиент

CSS-функция linear-Gradient - создает изображение, состоящее из постепенного перехода между двумя или более цветами вдоль прямой линии. Его результатом является объект типа данных <градиент>, который представляет собой особый тип <image>.

Запись функции:

background: linear-gradient(to top right, #000, #fff);

  В зависимости от сочетания и последовательности направлений получается градиент в разном направлении.

Но можно указать и угол радиента:

Также можно указать и процент заполнения цветом:

background: linear-gradient(to top, #b5bdc8 0%, #828c95 36%, #28343b 100%);

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

background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
            linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
            linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);

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

Пример 1.

.gradbloki {
  background: linear-gradient(to right, 
     red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);
}

 

Пример 2

.gradprimer2 {
  background: linear-gradient(45deg, red, blue);
}
 

Пример 3

.gradprimer3 {
  background: linear-gradient(135deg, orange, orange 60%, cyan);
}
 

===

Читать о повторе градиента - repeating-linear-gradient

Примеры линейных градиентов как фона - смотреть
Больше о градиентах - developer.mozilla.org

Онлайн генератор градиента - http://www.colorzilla.com/gradient-editor/

 
 Chrome  Edge  Firefox  Internet  Opera  Safari
26 12 16 10 12.1 6.1
 
 Android  Chrome  Edge  Firefox  Opera  Safari  Samsung
Yes Yes Yes 16 Yes Yes Yes

Оставить свой комментарий:

Опыт в веб разработке:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
1979
2019