Пока вы искали в другом месте, CSS-градиенты стали лучше

Пока вы искали в другом месте, CSS-градиенты стали лучше

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

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

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

Пока вы искали в другом месте, CSS-градиенты стали лучше

Хекс-значения: #5461c8, #c724b1, #e4002b, #ff6900, #f6be00, #97d700, #00ab84 и #00a3e0.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Давайте сначала посмотрим, как мы бы сделали это в CSS без использования двойных стоп-позиций! У нас есть восемь полос, что делает каждую из них одной восьмой ширины градиента. Одна восьмая от 100% это 12.5%,. Это означает, что linear-gradient() выглядит следующим образом:

Обратите внимание, что нам не нужно повторять значения % точки перехода, потому что, когда точка перехода меньше предыдущей, у нас автоматически происходит резкий переход. Вот почему всегда безопасно использовать 0 (что всегда будет меньше, чем любое положительное значение) и записывать #c724b1 25%, #e4002b 0 вместо #c724b1 25%, #e4002b 25%, например. Это то, что может упростить нашу жизнь в будущем, если, скажем, мы решим, что хотим добавить еще две полосы и сделать кратность стоп-позиций 10%.

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

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

Это генерирует точный CSS-градиент, который мы видели чуть раньше, и теперь нам больше не нужно ничего менять в двух местах.

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Например, когда у нас совсем немного вещей для обработки! Допустим, мы хотим получить гораздо более простой шаблон background, такой как диагональные линии, который, как я полагаю, представляет собой гораздо более распространенный вариант использования, чем чрезмерно радужный, который, вероятно, в любом случае не подходит для большинства веб-сайтов.

Пока вы искали в другом месте, CSS-градиенты стали лучше

Для этого требуется repeating-linear-gradient(), а это означает небольшое повторение, даже если у нас нет такого же длинного списка шестнадцатеричных значений, как раньше:

Здесь мы не можем отказаться от первой и последней точек перехода, потому что именно они указывают, как градиент повторяется в прямоугольнике, определенном параметром background-size.

Если вы хотите понять, почему для создания таких вещей лучше использовать repeating-linear-gradient() вместо простого linear-gradient() в сочетании с правильным background-size, ознакомьтесь с этой статьей, которую я написала некоторое время назад.

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

А для воссоздания диагональных полос нам нужно всего лишь:

Как насчет поддержки? Рада, что вы спросили! Она на самом деле очень хороша! Это работает в браузерах Safari, Chromium (куда теперь входит и Edge!) и Firefox. До-Chromium Edge и, возможно, некоторые мобильные браузеры все еще могут вас сдерживать, но если вам не нужно беспокоиться о поддержке каждого браузера на рынке, это нормально — использовать запасной вариант. Начните работать с этой функцией!

Автор: Ana Tudor

Источник: https://css-tricks.com

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий