.css() add_action add_filter background cf7 contact form 7 cqp css database db footer functions.php gradient header html javascript jquery js left px mic obs php position slick styles.css transition trovo twitch vbr visibility vkplay wp_ автоматизация антиспам верстка выключение компа запись игр кейсы командная строка настройки записи обновление плагины wp спящий режим таймер удобство
Геннадьич написал статью 18 декабря, 2021 года (16)
Записка о linear-gradient background
Градиент в деталях с поддержкой IE:
background: rgb(2,0,36);
background: -moz-linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(195,139,79,0.6110819327731092) 33%, rgba(0,212,255,1) 69%);
background: -webkit-linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(195,139,79,0.6110819327731092) 33%, rgba(0,212,255,1) 69%);
background: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(195,139,79,0.6110819327731092) 33%, rgba(0,212,255,1) 69%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#020024",endColorstr="#00d4ff",GradientType=1);
Здесь у нас:
- 0deg — угол градиента (0 — сверху вниз, 90 — слева направо, промежуточные значения — направления);
- rgba(2,0,36,1) — цвет с прозрачностью 1 (можно менять от 0 до 1, 0 — прозрачный);
- 0%, 33%, 69% — точки перехода цветов;
- startColorstr=»#020024″,endColorstr=»#00d4ff» — значения для цветов старта и финиша на IE.
Также можно сделать радиальный градиент:
background: rgb(238,174,202);
background: -moz-radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);
background: -webkit-radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);
background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#eeaeca",endColorstr="#94bbe9",GradientType=1);
Тут разница лишь в функции и вместо угла указывается circle.
Сайт-сервис для быстрой сборки нужного CSS-градиента:

Предыдущий пост: js Cookies.set() — cookies is not defined
Следующий пост: Делаем плавное появление блока при наведении