Деякі посилання про градієнти CSS

Час від часу час ведення блогу збігається навколо певної теми, і здається, що збережені статті в моїй папці закладок ведуть розмову. Розмова, яка зараз триває, стосується градієнтів CSS, і я вирішив надати посилання на деякі цікавіші частини.

• День 22: конічні градієнти — Мануель Матузович розглядав конічні градієнти на 21-й день своєї 100-денної серії про сучасний CSS, надаючи гарний високорівневий погляд на кольори, кути, розташування та колірні межі. Потім, далі день 22, він використовує його на ::backdrop псевдоелемент. (До речі, Twitter несподівано призупинив його обліковий запис — давайте допоможемо поправити корабель, якщо зможемо.)
• Ви справді розумієте радіальні градієнти CSS? - Патрік Броссет виконав тут роботу, гідну гіда, і я, чесно кажучи, все ще працюю над цим. Але я вже ціную його чіткі пояснення та демонстрації речей, які я досі мовчу, як-от ключові слова для розміру та форми радіального градієнта. Я вже пов’язую це з нашим Посібник з градієнтів CSS!
• Широко настроювані градієнти фону — Гей, до речі про радіальний градієнт, Скотт ВандехіМинулого тижня поширився рецепт одного з кількома кольорами. Його завдання полягало в тому, щоб створити візерунок градієнта, який міг би підтримувати різні варіації кольорів, що зазвичай являло б собою гарячу місиву класів CSS і значень кольорів для кожної варіації, якби не використання власні властивості. Таким чином, він може призначити спеціальну властивість для різних кольорів і значень розміщення для кожної кольорової точки, а потім просто оновити значення залежно від контексту. Більше того, спосіб оновлення користувацьких властивостей за допомогою JavaScript дозволив Скотту створити інструмент для налаштування його візерунка градієнта, якою щедро ділимося в кінці публікації.
• Півтонові шаблони CSS - Мішель Баркер з детальним розбивкою «напівтонових» шаблонів Ани Тюдор. Ефект нагадує пунктирний чорнильний відбиток старих шкільних газет. Поки Ана використовує Houdini Під капотом анімації та ефектів наведення Мішель розглядає сам ефект напівтонів і те, як він побудований за допомогою радіального градієнта. Мені особливо подобається те, як Мішель показує, як перейти від прямолінійної сітки точок до такої, де візерунок трохи зміщений. І дотримуйтеся кінця, щоб побачити, як вона підкреслює ефект a mask-image який використовує лінійний градієнт для створення ефекту вицвітання. Я трохи побажав цього візерунка, і завершився чимось акуратним, схожим на фільтр для рідких чорнильних плям.
• Ефективне рішення Navbar — Еріку Мейєру поставили цікаве завдання щодо дизайну меню, де пунктирна лінія виходить із посилання «поточна сторінка» та стає частиною більшої пунктирної рамки вздовж лівого краю контейнера вмісту. Ерік завжди є чудовим прикладом як мислити як фронтенд розробник, і він робить це тут, коли описує альтернативний маршрут, який він вибрав за допомогою лінійного градієнта, коли він натрапив на перешкоду зі стандартним підходом налаштування border-style: dotted на елементі.
• Замасковані градієнтні пунктирні лінії — Ерік із доповненням до останнього посилання, де показано не лише те, як він поєднав штрихи лівої межі з штрихами растрового зображення, але й те, як його уважне дизайнерське око переконало його змінити своє рішення, щоб імітувати нижчу роздільну здатність тире зображення з використанням двох повторюваних лінійних фонових градієнтів як a mask-image на градієнт фону. Такий ботанік і чудовий!