Справочник DESIGN/HTML/CSS

Мой Справочник | CSS3 | Линейный градиент

linear-gradient()
Линейный градиент
Синтаксис: background-image: linear-gradient(направление, цвет); 		background-image:
linear-gradient(to right, darkgreen, yellow);
Различные направления,
описание направления ключевыми словами:
to top,
to right,
to left,
to bottom (по ум*)
или связками слов:
to left top,
to left bottom,
to right top,
to right bottom 		1 linear-gradient(to top, yellow, black);
2 linear-gradient(to right, yellow, black);
3 linear-gradient(to bottom, yellow, black);
4 linear-gradient(to left, yellow, black);
5 linear-gradient(to left top, yellow, black);
6 linear-gradient(to right bottom, yellow, black);
1
2
3
4
5
6
Направления в градусах 1 linear-gradient(0deg, darkred, pink);
2 linear-gradient(180deg, darkred, pink);
3 linear-gradient(-235deg, darkred, pink);
4 linear-gradient(270deg, darkred, pink);
1
2
3
4
Многоцветный градиент
Цвета перечисляются через запятую после направления 
linear-gradient(
    to right,
        black,
        brown,
        blue,
        green,
        red,
        yellow,
        white
);
По умолчанию все цвета равномерно распределяются по ширине, но этим можно управлять с помощью пропорций цвета
Пропорции цветов
, % после цвета 		background-image:
linear-gradient(45deg, green, yellow);
linear-gradient(45deg, green 0%, yellow 100%);
linear-gradient(45deg, green 30%, yellow 70%);
1
По умолчанию пропорции распределены равномерно, если будут два цвета, то у первого будет 0%, у второго 100%, чтобы получился неразрывный градиент
2
Подтверждение верхнего примера
3
Здесь на шаге 0-30% ширины займёт зелёный цвет без искажений, а на 70-100% жёлтый, градиент будет на шаге 30-70% под углом 45 градусов.
Колорстопы 
linear-gradient(
    to right,
        black 0%, black 15%,
        brown 15%, brown 30%,
        blue 30%, blue 45%,
        green 45%, green 60%,
        red 60%, red 75%,
        yellow 75%, yellow 90%,
        white 90%, white 100%
);
Если указывать явный шаг для каждого цвета, чтобы конец одного цвета был началом другого, то самого градиента не будет, будут только эти цвета в чистом виде
Колорстопы в px 
linear-gradient(
    to right,
        black 0px, black 15px,
        brown 15px, brown 30px,
        blue 30px, blue 45px,
        green 45px, green 60px,
        red 60px, red 75px,
        yellow 75px, yellow 90px,
        white 90px, white 100px
);
Можно записывать в пикселях, при этом будет фиксированное значение цвета и не будет зависимости от ширины блока, когда стоят.
Цвет, который был указан последним занимает всё остальное свободное пространство
repeating-linear-gradient()
Повторяющийся инейный градиент
 
repeating-linear-gradient(
    to right,
        black 0px, black 15px,
        brown 15px, brown 30px,
        blue 30px, blue 45px,
        green 45px, green 60px,
        red 60px, red 75px,
        yellow 75px, yellow 90px,
        white 90px, white 100px
);
При повторении градиента обычно задают пиксели для колор-стопов и одинаковые крайние цвета, чтобы не было резких переходов
Множественный градиент
 
background-image: 
    linear-gradient(135deg, deeppink 25%, transparent 25%),
    linear-gradient(225deg, deeppink 25%, transparent 25%),
    linear-gradient(45deg, deeppink 25%, transparent 25%),
    linear-gradient(315deg, deeppink 25%, transparent 25%);
Если вместо transparent указать цвет хотя бы в одном градиенте, то он перекроет весь фон, и остальные не будут видны
background-image:
linear-gradient(135deg, black 0px, black 5px, brown 5px, brown 10px, blue 10px, blue 15px, green 15px, green 20px, red 20px, red 25px, yellow 25px, yellow 30px, transparent 30px),
linear-gradient(225deg, black 0px, black 5px, brown 5px, brown 10px, blue 10px, blue 15px, green 15px, green 20px, red 20px, red 25px, yellow 25px, yellow 30px, transparent 30px),
linear-gradient(45deg, black 0px, black 5px, brown 5px, brown 10px, blue 10px, blue 15px, green 15px, green 20px, red 20px, red 25px, yellow 25px, yellow 30px, transparent 30px),
linear-gradient(315deg, black 0px, black 5px, brown 5px, brown 10px, blue 10px, blue 15px, green 15px, green 20px, red 20px, red 25px, yellow 25px, yellow 30px, transparent 30px);
Фон на градиентах (пример указан в body)
 
body {
background-image:
    linear-gradient(
        to bottom right,
        rgba(101,109,120, 0.1) 25%,
        transparent 25%),
    linear-gradient(
        to bottom left,
        rgba(101,109,120, 0.1) 25%,
        transparent 25%),
    linear-gradient(
        to top right,
        rgba(101,109,120, 0.1) 25%,
        transparent 25%),
    linear-gradient(
        to top left,
        rgba(101,109,120, 0.1) 25%,
        transparent 25%);
background-position:
    0px 0px,
    0px 0px,
    0px 0px,
    0px 0px;
background-size: 100px 100px;
background-repeat: repeat;
background-color: rgba(255,255,224, 0.1);
/* background-attachment: fixed; */
}

Разработчик: Евгений Леухин
EvgenyLeukhin@yandex.ru

© 2016 - 2021