Css заливка градиентом: Использование CSS-градиентов — CSS | MDN

CSS-border с анимированным градиентом | xhtml.ru

Здесь речь пойдёт о применении градиентной заливки для CSS-border и её анимации для перемещения цветов градиента вдоль границ блока.

Самый очевидный способ реализации рамки с градиентом — установить какой-либо тип CSS-градиента в качестве значения CSS-свойству border-image:

div {
  border: 3em solid;
  border-image: linear-gradient(to right, green, yellow) 1;
}

See this code CSS Gradient Border on x.xhtml.ru.

Выглядит хорошо. Можно ли теперь анимировать эту рамку, чтобы градиент перемещался по краю блока?

Чтобы анимировать градиентную заливку CSS-border, нужно с помощью настраиваемого свойства (CSS-переменной) добавить градиенту угол (--angle) поворота, а для анимации изменять его значение в @keyframes.

div {
  --angle: 0deg;
  /* … */
  border-image: linear-gradient(var(--angle), green, yellow) 1;
  animation: 10s rotate linear infinite;
}
@keyframes rotate {
  to {
    --angle: 360deg;
  }
}

Используя CSS-переменную, можно заставить браузер правильно автоматически изменять её значение от 0 до 360 градусов, вместо того, чтобы добавлять отдельные ключевые кадры для каждого увеличения на 1 градус. Чтобы это работало, нужно зарегистрировать настраиваемое свойство с помощью правила @property.

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

Поскольку @property поддерживается только в Chromium, примеры ниже будут работать только в браузерах, основанных на нём. Для браузеров, которые его не поддерживают, можно добавить отдельные ключевые кадры для каждого шага, но здесь в примерах обойдёмся без усложнений.

See this code CSS Gradient Border (Animated) on x.xhtml.ru.

Хотя эффект в этом примере уже выглядит довольно красиво, если использовать более двух цветов, будут заметны конвульсии в момент перехода градиентов через углы блока. Например, такая радужная градиентная рамка:

See this code CSS Rainbow Gradient Border (Animated, Attempt 1) on x.xhtml.ru.

Лучше всего увидеть и понять, что там происходит, можно выключив заливку фона блока.

Чтобы исправить это и сделать движение плавным, сперва можно подумать об использовании радиального градиента, но на самом деле тут нужен конический градиент:

Таким образом, теперь каждый цвет градиента будет аккуратно и плавно переходить в рамку, а это приведёт к правильной плавной анимации.

div {
  /* … */
  border-image: conic-gradient(from var(--angle), red, yellow, lime, aqua, blue, magenta, red) 1;
}

Чтобы конец градиента красиво переходил в его начальный цвет, нужно в конце списка цветов повторить первый, здесь в примере это —

red.

See this code CSS Rainbow Gradient Border (Animated) on x.xhtml.ru.

Если выключить заливку фона, то можно увидеть, что border-image растягивает каждый цвет градиента перпендикулярно своему краю, вместо обозначенного для градиента конуса. С помощью различных типов CSS-градиента, как отмечено выше, можно получить разные эффекты при перемещении цвета по границе контейнера.

Animating a CSS Gradient Border.

Секция. Вкладка Стиль. — elguide

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

Вкладка стили включает в себя следующие настройки:

• фон;
• перекрытие фона;
• граница;
• разделитель секции;
• типографика.

Фон.

Здесь устанавливается фон секции: цветом, изображением, видео и др.

Тип фона.

Предусмотрена установка четырех типов фона:

• классический;
• градиентный;
• видео;
• слайдшоу.

Фон. Классический.

Классический фон предусматривает заливку цветом и установку картинки.

Цвет.

Выбрать цвет секции можно двумя вариантам: через предустановленные глобальные цвета и при помощи палитры цветов.

Выбор предустановленного цветаВыбор цвета в палитре

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

Управление глобальными цветами доступно по клику на иконке «шестеренки» справа.

Настройки глобальных цветов12

Или в настройках сайта.

3

Добавить цвет в палитру можно нажав значок ‘ + ‘ в правом верхнем углу.

Выбрать нужный цвет в палитре можно при помощи компьютерной мышки, кликнув по полю с цветом, поменять цветовые оттенки и прозрачность в нижней части палитры или указав html-код цвета.

Чтобы сбросить цвет в палитре, нужно нажать кнопку сброса.

Добавление изображения в разделе Тип Фона имеет больший приоритет, чем заливка цветом, т. е., при установке картинки после выбора заливки, секция зальется картинкой. При удалении картинки секция зальется ранее установленным цветом.

Изображение.

Изображение устанавливается из библиотеки WordPress, или подгружается динамически. (Работу с динамическим контентом мы рассмотрим позже в отдельной статье). После выбора изображения, отобразится его миниатюра.

Для разных устройств вы можете выбрать разное фоновое изображение, чтобы обеспечить наиболее вид при изменении размера экрана.

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

Их всего четыре:

• позиция;
• привязка;
• повтор;
• размер.

Позиция.

Устанавливает фоновое изображение внутри относительно оси X и оси Y. Существует как предустановленные варианты, так и произвольное позиционирование.

Предустановленное позиционированиеПроизвольное позиционирование

Привязка.

Здесь включается или отключается прокрутка фонового изображения.

Прокрутка фонового изображения. Фон прокручивается вместе с секцией.Закрепление фонового изображения. Фон остается на месте при прокрутке страницы.

Повтор.

Включает повтор изображения по вертикали и горизонтали, если оно меньше размера секции.

Покажем наглядно.

По умолчаниюНе повторятьПовтор по горизонталиПовтор по вертикали

По умолчанию небольшие изображения устанавливаются в режиме Повтор.

Данные настройки очень удобны при установке бесшовных текстур.

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

Бесшовная текстураПовтор бесшовной структуры. Небольшая картинка заполняет всю секцию без швов.

Эффект прокрутки.

Данные пункты позволяют настраивать эффекты поведения фона при прокрутке страницы или при взаимодействии с «компьютерной мышкой».

Работу данных эффектов лучше испытать самим на практике, все интуитивно понятно и не вызывает трудностей при освоении.

Фон градиентный.

Позволяет установить фон с переходом от одного цвета к другому, так называемый градиент.

Цвет градиента.

В данном варианте фона необходимо выбрать два цвета, настроить положение, тип и угол поворота градиента. Рассмотрим настройки более подробно.

В CSS линейный градиент может состоять из более чем двух цветов, но Elementor поддерживает только два.

Регулировкой ползунков положения настраивается соотношение заливки между первым и вторым цветом.

Тип.

Поддерживается два типа градиента:

• линейный;
• радиальный.

Линейный градиент, как видно из названия, создает заливку фона из нескольких цветов с плавным переходом вдоль прямой линии.

Угол.

Данная настройка позволяет установить угол наклона прямой линии в пределах 360 градусов. Применяется только к линейному градиенту.

Линейный градиент

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

Радиальный градиент

Плавность перехода регулируется установкой ползунка Положение.

Позиция.

Позиция регулирует положение точки, относительно которой градиент расходится:

• центр-центр;
• центр-лево;
• центр-право;
• верх-центр;
• верх-лево;
• верх-право;
• низ-центр;
• низ-лево;
• низ-право.

Видео-фон.

Данная настройка отвечает на назначение в качестве фона секции видео-файла.

Ссылка на видео.

Устанавливает ссылку на видео-фон:

• youtube;
• vimeo;
• ссылка на фал на локальном хостинге.

Сами разработчики рекомендуют использовать для видеофайлов расширение mp4.

Обратите внимание на что, что использовании видеофайла с вашего хостинга в качестве может негативно сказаться на скорости работы сайта.

Время начала.

Устанавливает время, с которого видео-фон начнет воспроизводиться.

Время окончания.

Устанавливает время окончания воспроизведения фонового видео-файла.

Вышеперечисленные настройки очень удобны в том случае, если у вас нет навыков монтажа видео или вам лень обрезать видео-фон под нужный размер.

Проиграть единожды.

Видео проиграется только один раз.

Проиграть на мобильных.

Разрешает проигрывание видео на мобильных (не злоупотребляйте данной настройкой, так как она очень сильно влияет на трафик через мобильные сети).

Резервный фон.

Устанавливает фоновое изображение на секцию, если по каким либо причинам видео-фон не грузится.

Слайд-шоу.

Устанавливает на фон слайд-шоу из картинок.

Изображения выбираются из стандартной медиа-библиотеки WordPress.

Дополнительно настраивается длительность и тип перехода, зацикливание пролистывания и положение слайдов.

Эффект Кена Бернса.

Обратите внимание на данную настройку. Она позволяет создать впечатление, что камера перемещается по объекту (панорамирование) или удаляется и приближается к нему (масштабирование).

Перекрытие фона.

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

Прозрачность.

Настройки аналогичны настройкам основного фона, кроме одного — появилась настройка прозрачности, которая отвечает за прозрачность перекрывающего фона.

Пример.

Изображение для основного фона Изображение для перекрывающего фонаРезультат перекрытия одного фона другим

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

Режим наложения.

Позволяет выбрать готовые фильтры наложения (пользуюсь редко).

Граница.

В данном разделе находятся настройки, связанные с границей (обводкой, border’ом) секции.

Сюда входят:

• тип границы;
• скругление углов;
• тень объекта (в данном случае секции)

Тип границы.

Элементор поддерживает создание границ пяти (5) типов, хотя в html их немного больше:

• сплошная;
• двойная;
• точечный пунктир;
• штриховой пунктир;
• выпуклость.

Покажем внешний вид каждой границы на примере внутренней секции, настройки границ которой идентичны основной секции, колонкам и всем виджетам Elementor.

Названия типов границ говорят сами за себя, поэтому что-либо разъяснять подробнее не имеет смысла.

Толщина.

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

По умолчанию толщина границы устанавливается на всю секцию путем ввода числового значения в любом поле. Чтобы установить границу для какой-то определенной стороны секции, нужно кликнуть на значке «цепочки» справа (обозначает связанные настройки, т. е. настройки одного параметра автоматически применяются ко всем параметрам), что даст возможность редактировать толщину границы для нужной стороны по отдельности.

Толщину границы можно устанавливать разной для ПК, планшета и смартфона по клику на специальный значок.

Толщина границы для PCТолщина границы для Tablet

Цвет.

Цвет границы устанавливается через хорошо знакомую палитру цветов Elementor.

Скругление углов.

Данная настройка устанавливает css свойство border-radius, отвечающее за скругление углов.

Скругление можно установить как в абсолютных, так и в относительных единицах:

• в процентах %;
• в пикселях px.

Для верха, низа, правого и левого угла возможно установить различную величину скругления.

Имейте ввиду, что если не указать толщину и цвет границы, то вы не увидите скругления углов

Тень объекта.

Данный пункт отвечает за css-свойство box-shadow, т. е. отбрасывание тени секцией, колонкой или виджетом Elementor.

Тень объекта включает следующие настройки:

• цвет;
• горизонтальное смещение;
• вертикальное смещение;
• размытие;
• размах;
• положение.

Регулируется каждая из них при помощи горизонтальных ползунков. Все настройки, кроме Размытия, регулируются в пределах от -100 до +100.

Рассмотрим каждую настройку отдельно.

Цвет.

Устанавливается при помощи стандартной палитры Elementor.

Горизонтальное смещение (x-offset).

Устанавливает смещение тени по оси X относительно элемента. Можно устанавливать отрицательное и положительное значение.

Горизонтальное смещение тени положительноеГоризонтальное смещение тени отрицательное

Вертикальное смещение (y-offset).

Устанавливает смещение тени относительно оси Y. Положительное значение смещает тень вниз, отрицательное — вверх.

Вертикальное смещение тени положительноеВертикальное смещение тени отрицательное

Размытие (blur).

Устанавливает радиус размытия. Отрицательные значения не поддерживаются, чем больше значение радиуса размытия, тем больше размыт край тени.

Радиус размытия 10pxРадиус размытия 56px

Размах.

Устанавливает значение, на которое тень растягивается. Поддерживаются отрицательные и положительные значения.

Размах 10pxРазмах 25px

Положение.

Устанавливает параметры отображения тени:

• внутренняя;
• внешняя.

Внешняя теньВнутренняя тень

Наглядные настройки тени в элементоре на изображении с сайта html5book.ru ниже.

Разделитель секции.

Устанавливает красивые разделители между блоками Элементора. Настроек достаточно много и каждый разработчик сайтов на Elementor обязательно найдет то, что нужно, при необходимости.

На данный момент имеется 18 типов разделителей:

• горы;
• капли;
• облака;
• зигзаг;
• пирамиды;
• треугольник;
• треугольник ассиметричный;
• наклон;
• прозрачный наклон;
• прозрачный вентилятор;
• кривая;
• ассиметричная кривая;
• волны;
• волнистая кисть;
• волнистый узор;
• стрелка;
• расщепление;
• книга.

Разделитель секции устанавливается отдельно для низа блока и для верха. Возможно разное комбинирование разделителей вверху и внизу.

При выборе типа разделителя появляются более подробные настройки разделителя.

Цвет разделителя устанавливается при помощи уже хорошо знакомой палитры Elementor.

Разделитель секции. Горы.

Не будем рассматривать каждый тип разделителя, так как все настройки просты и интуитивно понятны.

Типографика.

В данном разделе редактируется цвет заголовков, текста и ссылок секции, которые будут автоматически наследованы внутренними виджетами секции.

Можно настроить:

• цвет заголовка;
• цвет текста;
• цвет ссылки;
• цвет ссылки при наведении;
• выравнивание текста.

Цвет настраивается при помощи хорошо знакомой палитры Elementor.

Градиентные заливки для значков SVG

В моей статье 2016 года Как работать со значками SVG я заканчивал раздел «Дополнительно» предупреждением: извините, градиентные заливки не будут работать.

В основном я имел в виду такой код, как fill: linear-gradient(red, blue) , который не работает, потому что fill взят из SVG со своей собственной системой градиентов, а linear-gradient взят из CSS и сделан в основном для фона. Эти двое плохо сочетаются.

Я знал, что мы могли бы использовать SVG , но особо не пробовал. Затем, через несколько месяцев, я попробовал, и это сработало!, но я забыл написать об этом в блоге. Итак, как мы можем сделать это?

Добавление градиентов в ваш HTML

Самый надежный метод, который я нашел, заключался в добавлении элемента SVG на вашу HTML-страницу (например, в начале или конце ). Он должен определять :

Этот элемент должен быть скрыт , а не с помощью display:none , потому что некоторые браузеры просто проигнорируют градиент, если мы это сделаем. Кажется, работает установка нулевого пикселя.

Затем вы можете использовать этот градиент на значке SVG:

Или в CSS:

 .icon {
  /* градиент и резервный цвет */
  заполнить: url(#my-cool-gradient) #447799;
} 

Эти две иконки должны иметь градиент от бирюзового до темно-синего.
Кредиты: «Лист» Габриэле Маласпина и «Ковер» Бена Дэвиса

Обратите внимание, что вы не можете настроить градиент для каждого значка.

Если вам нужны разные градиенты, вам нужно будет создать разные определения градиента SVG в вашем HTML.

Изменение цветов градиента с помощью переменных CSS

Если мы хотим установить цвета градиента из CSS, мы можем сделать это с помощью переменных CSS. Мы собираемся написать наши определения градиента, используя пользовательские свойства CSS ( var(--my-custom-property) ).

Теперь мы можем установить — и, при необходимости, изменить — эти цвета в нашем CSS:

 #gradient-horizontal {
  --color-stop-1: #a770ef;
  --color-stop-2: #cf8bf3;
  --color-stop-3: #fdb99b;
}
#градиент-вертикаль {
  --color-stop-1: #00c3ff;
  --color-stop-2: #77e190;
  --color-stop-3: #ffff1c;
} 

И, наконец, используйте их для заливки значков:

 . icon-hgradient {
  fill: url(#gradient-horizontal) серый;
  /* Мы могли бы использовать его и как заливку штриха:
  штрих: url(#gradient-horizontal) серый; */
}
.icon-vградиент {
  fill: url(#gradient-vertical) серый;
} 

Вот результат (в браузере с поддержкой пользовательских свойств CSS):

Тестирование значков с градиентной заливкой SVG и переменными CSS Градиентная заливка окрашивается для каждого контура значка. Чтобы избежать несоответствия цвета (например, соединения между листом и стеблем), может быть полезно объединить все или большинство путей в исходном SVG значка.

Использование градиентов во внешних файлах

Этот метод работает в Firefox и раньше работал в Edge (подтверждено в Edge 14 и 15, регрессировано в Edge 16 и Insider Preview). В следующем тесте:

1. Обе иконки извлекаются из внешнего спрайта: sprite.svg.
2. Первый значок использует градиент с этой HTML-страницы, а второй — из sprite.svg .

 . icon-спрайт-градиент {
  заполнить: url(sprite.svg#my-теплый-градиент) красный;
} 

Неподдерживающие браузеры (Chrome, Safari, последняя версия Edge…) должны отображать красную резервную заливку для второго значка.

Использование градиентов в CSS в качестве URL-адресов данных

Что, если бы я сказал вам, что вы можете определить свои градиенты в SVG, но поместить SVG в свой CSS в качестве URL-адресов данных? Ладно, сейчас я просто шучу. Но это работает! По крайней мере, это работает в Firefox: P

 /* Обратите внимание на id="grad"` в URL-адресе SVG и на то, как мы его используем в конце. Обратите внимание, что `#` в шестнадцатеричных цветах должен быть экранирован как `%23`. */
.icon-градиент-URL {
  fill: url("data:image/svg+xml,#grad") фиолетовый;
}
/* Тот же SVG в base64 */
.icon-градиент-base64 {
  fill: url("data:image/svg+xml;base64,PHN2. ..zdmc+#grad") фиолетовый;
} 

Видите, как мы ссылаемся на градиент id с #grad в конце URL-адреса? Кажется, только Firefox понимает этот синтаксис. Эх, очень плохо.

Попытка показать градиент от пурпурного до фиолетового. В неподдерживающих браузерах (Chrome, Safari, Edge…) должна отображаться фиолетовая резервная заливка.

Давайте повторим

1. Да, вы можете использовать градиентные заливки!
2. Но вам нужно включить градиенты SVG в ваш HTML
3. Цвета могут быть жестко заданы в градиенте SVG (в HTML) или заданы в CSS (с использованием переменных CSS)
4. Все значки, использующие заданный градиент, будут использовать одинаковые цвета, вы не можете переопределить определенный цвет следующим образом:

 .icon-градиент-переопределить {
  /* Это работает, как показано ранее */
  fill: url(#gradient-horizontal) серый;
  /* Но это ничего не даст... */
  --color-stop-1: белый;
  --color-stop-2: серый;
  --color-stop-3: черный;
} 

Если вам нужно много разных градиентных заливок, этот метод может вам не подойти. Создание 10 или 20 различных градиентов SVG в вашем HTML нецелесообразно. Но для более простых вариантов использования это должно работать во всех текущих браузерах (включая IE11, если мы избегаем переменных CSS).

Создание красивых градиентов в CSS с линейным градиентом, радиальным градиентом или коническим градиентом.

Итак, вот линейный градиент CSS, идущий от чистого желтого к чистому синему:

Обратите внимание, что он немного размыт и грязен в середине?

Это то, что Эрик Кеннеди назвал «серой мертвой зоной». Если вы не будете очень осторожны при выборе цветов для своих градиентов, вы часто будете получать ненасыщенную среднюю часть в своих градиентах CSS.

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

Ссылка на этот заголовок

Как рассчитываются градиенты

Задумывались ли вы, как работает алгоритм CSS linear-gradient ? Как он на самом деле вычисляет конкретное значение цвета для каждого пикселя в спектре?

Он определяет это, взяв среднее математическое значение для каждого из трех цветовых каналов: красного, зеленого и синего.

Щелкните и перетащите, чтобы увидеть конкретную разбивку RGB для каждого пикселя на пути:

Как использовать: Щелкните и перетащите, чтобы изменить положение индикатора, или сфокусируйте индикатор и используйте клавиши со стрелками влево/вправо.

В цветовом пространстве RGB мы создаем цвета, смешивая три канала: красный, зеленый и синий. Каждый канал имеет диапазон от 0 до 255.

Если мы выставим на максимум все три канала — 255/255/255 — мы получим чистый белый цвет. И если мы установим каждый канал в 0, мы получим черный цвет, отсутствие какого-либо цвета.

На самом деле, если для всех трех каналов установлено одинаковое значение, результатом всегда будет цвет в градациях серого:

В приведенной выше демонстрации мы начинаем с чистого желтого цвета (255/255/0). По мере продвижения по градиенту мы начинаем смешивать синий цвет (0/0/255). К тому времени, когда мы достигаем самого центра, мы смешали половину желтого и половину синего.

Другими словами, все три канала сходятся к своему среднему значению, 127,5. И в результате цвет серый.

Мне немного странно, что середина между синим и желтым — серая. Смешивая два очень насыщенных цвета вместе, мы получаем полностью ненасыщенный цвет. Что, если бы был способ смешать только пигмент , и поддерживать постоянную насыщенность повсюду?

Ссылка на этот заголовок

Альтернативные цветовые режимы

Существует множество различных способов представления цвета. До сих пор мы использовали режим R/G/B. И, честно говоря, этот цветовой режим отстой. 😅

Давайте поговорим о другом цветовом режиме: HSL .

HSL расшифровывается как Hue/Saturation/Lightness. Если вы когда-либо использовали палитру цветов, вы, вероятно, работали с этим цветовым режимом.

Вот живой пример:

Вот что представляет каждое значение:

• Оттенок определяет, каким будет пигмент, где цвет попадает на цветовой круг.

• Насыщенность управляет яркостью цвета.

• Яркость определяет, насколько светлым или темным будет цвет.

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

Вот действительно волшебная вещь: что, если вместо усреднения значений RGB в наших градиентах мы усредним значения HSL?

Что ж, давайте попробуем:

HUE:

60

SAT:

100

LIT:

50

Нет серой зоны больше мы смешиваем значения H/S/L.

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

Вот еще один пример, на этот раз смешивание цветов с разной насыщенностью и яркостью:

HUE:

185

SAT:

83

LIT:

37 9000 :

Большая разница, верно?

Теперь HSL не обязательно лучший цветовой режим для использования в любой ситуации; он имеет тенденцию создавать градиенты, которые могут быть слишком яркими и яркими, потому что он не принимает во внимание человеческое восприятие.

Согласно режиму цвета HSL, оба из этих цветов имеют одинаковую «легкость»:

Hue:

60

Sat:

100

Lit:

50

HUE:

240

:

2409003

:

2409003

:

SAT:

100

LIT:

50

Не все видят цвет одинаково, но большинство людей скажут, что желтый кажется намного светлее синего, несмотря на то, что они имеют одинаковое значение «яркости». Однако HSL не заботится о том, как люди воспринимают цвета; он смоделирован после грубой физики, энергии и длин волн и тому подобного.

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

C:

3350

L:

6013

Какой цветовой режим лучше? Ну, это действительно зависит от того, какой эффект вам нужен! Мне нравится экспериментировать с множеством различных цветовых режимов, чтобы найти лучший для определенного градиента.

Ссылка на этот заголовок

Применение этих знаний

У меня есть хорошие и плохие новости. Начнем с плохих новостей.

CSS не дает нам возможности изменить цветовой режим, используемый при расчете градиента. Мы не можем «согласиться» на использование интерполяции HSL для заданного градиента, по крайней мере, пока. CSS Images Level 4 предоставляет способ указать «метод интерполяции цветов», но, насколько я знаю, он не очень широко поддерживается в браузерах.

Но есть и хорошие новости: мы можем обойти это ограничение, если будем немного хитрыми. 😈

Градиенты в CSS не должны ограничиваться только двумя цветами. Мы можем передать 3 цвета или 10 цветов или 100 цветов.

Во-первых, нам нужно вручную вычислить кучу промежуточных цветов. Мы сделаем это с помощью JavaScript, чтобы мы могли использовать любой цветовой режим, какой захотим (используя полезную библиотеку, такую ​​как chroma.js):

rgbhsllabhcl

Затем мы возьмем эту коллекцию цветов и передадим каждое значение в функция градиента CSS:

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

Но подождите, не будет ли движок CSS по-прежнему использовать интерполяцию RGB для вычисления пробелов между каждого предоставленного цвета? Если мы не передаем сотен цветов, достаточно для каждого отдельного пикселя, мы все еще полагаемся на интерполяцию RGB!

Это правда, но, к счастью, это не имеет большого значения.

Когда два цвета очень похожи друг на друга, на самом деле не имеет значения, какой цветовой режим мы используем. Вы получите примерно такой же градиент. Мы не получим сильно отличающееся «среднее» значение, независимо от того, как вы определяете «среднее».

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

Цвета настолько похожи, что интерполяция RGB не может их испортить.

Итак, наша хитрая уловка состоит в том, чтобы сгенерировать кучу средних цветов, используя пользовательский цветовой режим, и передать их все нашей функции градиента CSS. Движок CSS будет использовать интерполяцию RGB, но это не повлияет на конечный результат (по крайней мере, не настолько, чтобы это было заметно человеку).

Хорошо, теперь самое интересное. Давайте поговорим о том, как создавать эти градиенты. 😄

Ссылка на этот заголовок

Представляем «Генератор градиента»

Я создал инструмент, который поможет вам создавать пышные, красивые градиенты, которые вы можете использовать в CSS.

Мне очень нравится этот инструмент. Он использует все то, о чем мы говорили в этом блоге, а также несколько других изящных приемов (например, использование кривой плавности для управления распределением цветов).