Помогите, пожалуйста, сделать вот такой градиент на CSS.
-
1это не биржа труда– meineCommented 12 окт. 2019 в 16:19
-
полностью согласен с @meine - еще хочу дополнить это не градиаент, это паттерн. для того чтобы его сделать нужно вырезать квадрат и клонировать его с помощью css - например background-repeat: repeat-x;– Ruslan ButivchenkoCommented 12 окт. 2019 в 18:39
-
Но это же не градиент...– Suvitruf - Andrei ApanasikCommented 12 окт. 2019 в 18:43
-
@Suvitruf да, это несколько радиальных градиентов наложенных друг на друга– Stranger in the QCommented 12 окт. 2019 в 19:05
-
@StrangerintheQ век живи - век учись)– Suvitruf - Andrei ApanasikCommented 12 окт. 2019 в 19:07
Добавить комментарий
|
1 ответ
Это повторение вот такого шаблона:
Такой можно собрать при помощи css переменных и radial-gradient:
body {
--c1: lightgray;
--c2: white;
--pattern:
var(--c2) 0px, var(--c2) 4px,
var(--c1) 5px, var(--c1) 14px,
var(--c2) 15px, var(--c2) 19px,
var(--c1) 20px, var(--c1) 29px,
var(--c2) 30px, var(--c2) 34px,
var(--c1) 35px, var(--c1) 44px,
var(--c2) 45px, var(--c2) 49px,
transparent 50px, transparent 100%;
background:
radial-gradient(circle at 50px 75px, var(--pattern)),
radial-gradient(circle at 0px 50px, var(--pattern)),
radial-gradient(circle at 100px 50px, var(--pattern)),
radial-gradient(circle at 50px 25px, var(--pattern));
background-size: 100px 50px
}
-
Отлично! Код красиво смотрится. Нужно будет мне тоже чаще CSS-переменные применять по прямому назначению, а не только для доступа из JS. :)– UModeLCommented 18 мар. 2020 в 8:18