Некоторые ссылки о градиентах CSS

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

• День 22: конические градиенты — Мануэль Матузович рассмотрел конические градиенты на 21-м дне своей 100-дневной серии статей о современном CSS, предоставив хороший высокоуровневый обзор цветов, углов, размещения и цветовых остановок. Затем на День 22, он использует его на ::backdrop псевдоэлемент. (Кстати, Twitter неожиданно заблокировал его аккаунт — давайте поможем выровнять этот корабль, если сможем.)
• Вы действительно понимаете радиальные градиенты CSS? - Патрик Броссе проделал здесь достойную руководства работу, и я, честно говоря, все еще прорабатываю ее. Но я уже ценю его четкие объяснения и демонстрации вещей, которые я до сих пор путаю, например, ключевые слова для размера и формы радиального градиента. Я уже связываю это в нашем собственном Руководство по CSS-градиентам!
• Настраиваемые фоновые градиенты — Эй, говоря о радиальном градиенте, Скотт Вандехирецепт одного с несколькими цветовыми остановками был распространен на прошлой неделе. Его задача состояла в том, чтобы создать шаблон градиента, который мог бы поддерживать различные цветовые вариации, что обычно представляло бы собой беспорядок из классов CSS и значений цвета для каждой вариации, если бы не использование настраиваемые свойства. Таким образом, он может назначить пользовательское свойство для разных цветов и значений размещения для каждой точки цвета, а затем просто обновить значения в зависимости от контекста. Более того, способ обновления пользовательских свойств с помощью JavaScript позволил Скотту создать инструмент для настройки его шаблона градиента, которым щедро поделились в конце поста.
• Полутоновые шаблоны CSS - Мишель Баркер с подробным разбором «полутоновых» узоров Аны Тюдор. Эффект чем-то напоминает точечный чернильный оттиск старых школьных газет. Пока Ана использует Houdini Под капотом анимации и эффектов наведения Мишель уделяет особое внимание самому эффекту полутонов и тому, как он создается с помощью радиального градиента. Мне особенно нравится, как Мишель показывает, как перейти от простой сетки точек к той, где узор немного смещен. И оставайтесь до конца, чтобы увидеть, как она подчеркивает эффект mask-image который использует линейный градиент для создания эффекта затухания. немного повозился с этим узором, тоже, и получил что-то аккуратное, похожее на жидкий фильтр для чернильных пятен.
• Лихое решение для панели навигации — Эрик Мейер получил интересную задачу по дизайну меню, в котором пунктирная линия выходит из ссылки «текущая страница» и становится частью более крупной пунктирной границы вдоль левого края контейнера контента. Эрик всегда отличный пример как думать как фронтенд разработчик, и он делает это здесь, описывая альтернативный маршрут, который он выбрал, используя линейный градиент, когда он наткнулся на препятствие со стандартным подходом настройки border-style: dotted на элементе.
• Маскированные градиентные пунктирные линии - Эрик с продолжением этой последней ссылки, показывающим не только то, как он соединил черточки левой границы с черточками растрового изображения, но и то, как его привередливый дизайнерский взгляд убедил его изменить свое решение, чтобы имитировать более низкое разрешение изображения. штрихи изображения с использованием двух повторяющихся линейных градиентов фона в качестве mask-image на фоновом градиенте. Такой занудный и классный!