.css() add_action add_filter background cf7 contact form 7 cookies cqp css custom code cyr2lat footer functions.php gradient html javascript jquery js js-cookie left px mic obs php position slick styles.css transition vbr visibility wp антиспам аудит сайта верстка запись игр зачем это нужно кириллица латиница настройки записи обновление плагины wp пояснение проверка типа страницы свой код транслит удобство
Геннадьич написал статью 18 декабря, 2021 года (5)
Записка о 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
Следующий пост: Делаем плавное появление блока при наведении