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

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

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

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

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

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

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

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

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

CSS

123456789linear-gradient(90deg,              #5461c8 12.5% /* 1*12.5% */,   #c724b1 0, #c724b1 25%   /* 2*12.5% */,   #e4002b 0, #e4002b 37.5% /* 3*12.5% */,   #ff6900 0, #ff6900 50%   /* 4*12.5% */,   #f6be00 0, #f6be00 62.5% /* 5*12.5% */,   #97d700 0, #97d700 75%   /* 6*12.5% */,   #00ab84 0, #00ab84 87.5% /* 7*12.5% */,   #00a3e0 0)

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

READ
Intersection Observer API позволяет сделать отложенную загрузку моментальной

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

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

CSS

12345678910111213141516171819$c: #5461c8 #c724b1 #e4002b #ff6900 #f6be00 #97d700 #00ab84 #00a3e0; @function get-stops($c-list) {  $s-list: ();  $n: length($c-list);  $u: 100%/$n;   @for $i from 1 to $n {    $s-list: $s-list,              nth($c-list, $i) $i*$u,              nth($c-list, $i + 1) 0  }   @return $s-list} .strip {  background: linear-gradient(90deg, get-stops($c)))}

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

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

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

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

READ
7 новых и интересных функций TypeScript

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

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

CSS

12345repeating-linear-gradient(-45deg,     #ccc /* can’t skip this, repeating gradient won’t work */,     #ccc 2px,     transparent 0,     transparent 9px /* can’t skip this either, tells where gradient repetition starts */)

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

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

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

CSS

123456789linear-gradient(90deg,     #5461c8 12.5%,     #c724b1 0 25%,     #e4002b 0 37.5%,     #ff6900 0 50%,     #f6be00 0 62.5%,     #97d700 0 75%,     #00ab84 0 87.5%,     #00a3e0 0)

А для воссоздания диагональных полос нам необходимо всего только:

CSS

123repeating-linear-gradient(-45deg,     #ccc 0 2px,     transparent 0 9px)

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

READ
Необычные случаи использования псевдо-элементов

Создатель: Ana Tudor

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

Источник

Оценить статью
Блог о самом интересном.
Добавить комментарий