Градиенты css: CSS3-градиент

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

CSS-градиенты представлены типом данных <gradient> (en-US), специальным типом <image> (en-US), состоящим из последовательного перехода между двумя и более цветами. Вы можете выбрать один из трёх типов градиентов: линейный (создаётся с помощью функции linear-gradient), круговой (создаётся с помощью radial-gradient) и конический (создаётся с помощью функции conic-gradient (en-US)). Вы можете также создавать повторяющиеся градиенты с помощью функций repeating-linear-gradient, repeating-radial-gradient (en-US) и repeating-conic-gradient (en-US).

Градиенты могут быть использованы везде, где может быть использован тип <image>, например в качестве фона. Так как градиенты генерируются динамически, они могут избавить от необходимости использовать файлы растровых изображений, которые ранее использовались для достижения похожих эффектов. В дополнение к этому, так как градиенты генерируются браузером, они выглядят лучше, чем растровые изображения в случае увеличения масштаба, и их размер может быть изменён на лету.

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

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

Обычный линейный градиент

Чтобы создать самый простой тип градиента, всё, что вам нужно – это указать два цвета. Они называются точки остановки цвета. Их должно быть, как минимум, две, но у вас может быть столько, сколько захотите.

.simple-linear {
  background: linear-gradient(blue, pink);
}

Изменение направления

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

.horizontal-gradient {
  background: linear-gradient(to right, blue, pink);
}

Диагональные градиенты

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

.diagonal-gradient {
  background: linear-gradient(to bottom right, blue, pink);
}

Использование углов

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

.angled-gradient {
  background: linear-gradient(70deg, blue, pink);
}

При использовании угла 0deg создаётся вертикальный градиент, идущий снизу вверх, 90deg создаёт горизонтальный градиент, идущий слева направо, и так далее по часовой стрелке. Отрицательные углы идут против часовой стрелки.

Все типы CSS-градиентов – это диапазон позиционно-зависимых цветов. Цвета, создаваемые CSS-градиентами, могут варьироваться непрерывно с изменением позиции, создавая плавные цветовые переходы. Возможно также создавать полосы сплошных цветов, и резкие переходы между двумя цветами. Следующее примеры работают во всех градиентных функциях:

Использование более двух цветов

Вам не нужно ограничиваться двумя цветами – вы можете использовать столько, сколько хотите! По умолчанию цвета равномерно распределены по градиенту.

.auto-spaced-linear-gradient {
  background: linear-gradient(red, yellow, blue, orange);
}

Расположение точек остановок цветов

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

.multicolor-linear {
   background: linear-gradient(to left, lime 28px, red 77%, cyan);
}
 

Создание резких переходов

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

.striped {
   background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%);
}

Подсказки градиента

По умолчанию градиент идёт плавно от одного цвета до другого. Вы можете добавить цветовую подсказку, чтобы переместить значение средней точки перехода в определённую точку градиента. В этом примере мы переместили среднюю точку перехода из отметки 50% на отметку 10%.

.color-hint {
  background: linear-gradient(blue, 10%, pink);
}
.simple-linear {
  background: linear-gradient(blue, pink);
}

  

Создание цветных линий и полосок

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

.multiposition-stops {
   background: linear-gradient(to left,
       lime 20%, red 30%, red 45%, cyan 55%, cyan 70%, yellow 80% );
   background: linear-gradient(to left,
       lime 20%, red 30% 45%, cyan 55% 70%, yellow 80% );
}
.  multiposition-stop2 {
   background: linear-gradient(to left,
      lime 25%, red 25%, red 50%, cyan 50%, cyan 75%, yellow 75% );
   background: linear-gradient(to left,
      lime 25%, red 25% 50%, cyan 50% 75%, yellow 75% );
}

В первом примере выше лаймовый цвет идёт от отметки 0%, далее, как указано, до отметки 20%, сделает переход от лаймового до красного через 10% ширины градиента, достигнет сплошного красного на отметке 30%, и останется таким до 45% градиента, где он потускнеет до голубого, оставаясь таким ещё 15% градиента, и так далее.

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

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

Управление переходом градиента

По умолчанию градиент плавно переходит между цветами двух соседних точек остановки, а средняя точка между этими двумя точками остановки является средним значением цветового перехода. Вы можете контролировать интерполяцию или переход между двумя точками остановки добавлением его расположения в цветовой подсказке. В этом примере цвет достигает средней точки перехода от лаймового до голубого на расстоянии 20% градиента вместо стандартных 50%. Во втором примере нет такой подсказки, чтобы подчеркнуть отличие, получаемое при её использовании:

.colorhint-gradient {
  background: linear-gradient(to top, black, 20%, cyan);
}
.regular-progression {
  background: linear-gradient(to top, black, cyan);
}

Перекрытие градиентов

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

.layered-image {
  background: linear-gradient(to right, transparent, mistyrose),
      url("https://mdn.mozillademos.org/files/15525/critters.png");
}

Наслаивание градиентов

Вы можете даже наслаивать градиенты друг на друга. Если верхние градиенты не полностью непрозрачны, градиенты, лежащие под ними, тоже будут видны.

.stacked-linear {
  background:
      linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
      linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
      linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
}

  

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

Обычный круговой градиент

Как и в случае с линейными градиентами, всё, что вам нужно, чтобы создать круговой градиент – это два цвета. По умолчанию центр градиента находится на отметке 50% 50%, градиент становится овальным с учётом соотношения сторон содержащего его блока:

.simple-radial {
  background: radial-gradient(red, blue);
}

Размещение круговых точек остановки

.radial-gradient {
  background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%);
}

Расположение центра градиента

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

.radial-gradient {
  background: radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%);
}

Задание размеров кругового градиента

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

Пример: ближайшая сторона для эллипса

В этом примере используется значение размера closest-side, которое означает, что размер определяется расстоянием от начальной точки (центра) до ближайшей стороны блока.

.radial-ellipse-side {
  background: radial-gradient(ellipse closest-side,
      red, yellow 10%, #1e90ff 50%, beige);
}

Пример: самый дальний угол для эллипса

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

.radial-ellipse-far {
  background: radial-gradient(ellipse farthest-corner at 90% 90%,
      red, yellow 10%, #1e90ff 50%, beige);
}

Пример: ближайшая сторона для круга

Этот пример использует closest-side, что задаёт размер круга как расстояние между начальной точкой (центром) и ближайшей стороной. Радиус круга – это расстояние между центром градиента и ближайшей стороной. Круг, с учётом позиционирования в точке 25% от левой стороны и 25% от низа, ближе всего к низу, так как расстояние по высоте в этом случае меньше, чем по ширине.

.radial-circle-close {
  background: radial-gradient(circle closest-side at 25% 75%,
      red, yellow 10%, #1e90ff 50%, beige);
}

Наложение круговых градиентов

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

. stacked-radial {
  background:
      radial-gradient(circle at 50% 0,
        rgba(255,0,0,.5),
        rgba(255,0,0,0) 70.71%),
      radial-gradient(circle at 6.7% 75%,
        rgba(0,0,255,.5),
        rgba(0,0,255,0) 70.71%),
      radial-gradient(circle at 93.3% 75%,
        rgba(0,255,0,.5),
        rgba(0,255,0,0) 70.71%) beige;
  border-radius: 50%;
}

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

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

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

Обычный конический градиент

Так же, как и в случае с линейными и круговыми градиентами, всё, что вам нужно для создания конического градиента – это два цвета. По умолчанию центр градиента находится в точке 50% 50%, начало градиента направлено вверх:

.simple-conic {
  background: conic-gradient(red, blue);
}

Расположение конического центра

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

.conic-gradient {
  background: conic-gradient(at 0% 30%, red 10%, yellow 30%, #1e90ff 50%);
}

Изменение угла

Вы можете задать угол, в котором направлено начало градиента значением типа <angle>, с предшествующим ему ключевым словом «from».

.conic-gradient {
  background: conic-gradient(from 45deg, red, orange, yellow, green, blue, purple);
}

Функции linear-gradient, radial-gradient и conic-gradient (en-US) не поддерживают автоматически повторяющиеся точки остановки цвета. Однако, для реализации этой функциональности существуют функции repeating-linear-gradient, repeating-radial-gradient (en-US) и repeating-conic-gradient (en-US).

Размер повторяющейся градиентной линии или дуги – это длина от значения первой до значения последней точки остановки цвета. Если первая точка остановки содержит только цвет без указания длины до точки остановки, то используется значение по умолчанию, равное 0. Если последняя точка остановки содержит только цвет без указания длины до точки установки, то используется значение по умолчанию, равное 100%. Если ни то, ни другое не определено, то линия градиента будет равна 100%, что означает, что линейный и конический градиент не будет повторяться, а круговой градиент будет повторяться, только если радиус градиента меньше, чем расстояние между центром градиента и самым дальним углом. Если первая точка остановки определена и имеет значение больше 0, градиент будет повторяться при условии, что размер линии или дуги равен разнице между первой и последней точкой остановки, если эта разница меньше, чем 100% или 360 градусов.

Повторяющиеся линейные градиенты

В этом примере используется repeating-linear-gradient для создания повторяющегося градиента, идущего по прямой линии. Цветовая последовательность начинается заново с каждым повторением градиента. В данном случае градиент имеет длину 10px.

.repeating-linear {
  background: repeating-linear-gradient(-45deg, red, red 5px, blue 5px, blue 10px);
}

Множественные повторяющиеся линейные градиенты

Так же, как и в случае с обычными линейными и круговыми градиентами, вы можете использовать множественные градиенты, один поверх другого. Это имеет смысл, только если градиенты частично прозрачны, что позволяет видеть одни градиенты сквозь прозрачные части других градиентов, этого же можно достичь при условии использования разных размеров фона (background-size), при этом возможно ещё и при разных значениях свойства background-position для каждого градиента. Мы использовали прозрачность.

В данном случае градиентные линии имеют длину 300px, 230px и 300px.

.multi-repeating-linear {
  background:
      repeating-linear-gradient(190deg, rgba(255, 0, 0, 0.5) 40px,
        rgba(255, 153, 0, 0.5) 80px, rgba(255, 255, 0, 0.5) 120px,
        rgba(0, 255, 0, 0.5) 160px, rgba(0, 0, 255, 0.5) 200px,
        rgba(75, 0, 130, 0.5) 240px, rgba(238, 130, 238, 0.5) 280px,
        rgba(255, 0, 0, 0.5) 300px),
      repeating-linear-gradient(-190deg, rgba(255, 0, 0, 0.5) 30px,
        rgba(255, 153, 0, 0.5) 60px, rgba(255, 255, 0, 0.5) 90px,
        rgba(0, 255, 0, 0.5) 120px, rgba(0, 0, 255, 0.5) 150px,
        rgba(75, 0, 130, 0.5) 180px, rgba(238, 130, 238, 0.5) 210px,
        rgba(255, 0, 0, 0.5) 230px),
      repeating-linear-gradient(23deg, red 50px, orange 100px,
        yellow 150px, green 200px, blue 250px,
        indigo 300px, violet 350px, red 370px);
}

Клетчатый градиент

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

.plaid-gradient {
  background:
      repeating-linear-gradient(90deg, transparent, transparent 50px,
        rgba(255, 127, 0, 0. 25) 50px, rgba(255, 127, 0, 0.25) 56px,
        transparent 56px, transparent 63px,
        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
        transparent 69px, transparent 116px,
        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
      repeating-linear-gradient(0deg, transparent, transparent 50px,
        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
        transparent 56px, transparent 63px,
        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
        transparent 69px, transparent 116px,
        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
      repeating-linear-gradient(-45deg, transparent, transparent 5px,
        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px),
      repeating-linear-gradient(45deg, transparent, transparent 5px,
        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px);

  background:
      repeating-linear-gradient(90deg, transparent 0 50px,
        rgba(255, 127, 0, 0.25) 50px 56px,
        transparent 56px 63px,
        rgba(255, 127, 0, 0.25) 63px 69px,
        transparent 69px 116px,
        rgba(255, 206, 0, 0.25) 116px 166px),
      repeating-linear-gradient(0deg, transparent 0 50px,
        rgba(255, 127, 0, 0.25) 50px 56px,
        transparent 56px 63px,
        rgba(255, 127, 0, 0.25) 63px 69px,
        transparent 69px 116px,
        rgba(255, 206, 0, 0.25) 116px 166px),
      repeating-linear-gradient(-45deg, transparent 0 5px,
        rgba(143, 77, 63, 0.25) 5px 10px),
      repeating-linear-gradient(45deg, transparent 0 5px,
        rgba(143, 77, 63, 0.25) 5px 10px);
}

Повторяющиеся круговые градиенты

В этом примере для создания кругового градиента, повторяющегося из центральной точки, используется repeating-radial-gradient (en-US). Цветовая последовательность начинаются заново с каждой итерацией повторения градиента.

.repeating-radial {
  background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
}

Множественные повторяющиеся круговые градиенты

. multi-target {
  background:
      repeating-radial-gradient(ellipse at 80% 50%,rgba(0,0,0,0.5),
        rgba(0,0,0,0.5) 15px, rgba(255,255,255,0.5) 15px,
        rgba(255,255,255,0.5) 30px) top left no-repeat,
      repeating-radial-gradient(ellipse at 20% 50%,rgba(0,0,0,0.5),
        rgba(0,0,0,0.5) 10px, rgba(255,255,255,0.5) 10px,
        rgba(255,255,255,0.5) 20px) top left no-repeat yellow;
  background-size: 200px 200px, 150px 150px;
}

• Градиентные функции: linear-gradient, radial-gradient, conic-gradient (en-US), repeating-linear-gradient, repeating-radial-gradient (en-US), repeating-conic-gradient (en-US)
• Типы данных CSS, связанные с градиентами: <gradient> (en-US), <image> (en-US)
• Свойства CSS, связанные с градиентами: background, background-image
• Галерея шаблонов градиентов CSS, от Lea Verou
• Библиотека градиентов CSS3, от Estelle Weyl
• Генератор градиентов CSS

Лучшие генераторы градиентов CSS для дизайнеров

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

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

CoolHue 

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

Хотя у вас нет особого контроля над настройкой параметров, с помощью CoolHue вы сразу поймете, работает ли один из цветовых комбо для вас или нет, потому что все параметры находятся прямо на экране. Также одним щелчком мыши вы можете скопировать CSS. Вот и все. Серьезно! Кроме того каждый файл доступен в формате PNG для скачивания.

CSS Gradient 

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

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

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

UI Gradients 

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

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

Не нравится то, что вы видите? Тогда вы можете добавлять данные градиента в файл gradients.json в проекте и отправлять запрос на перенос.

CSSmatic 

CSSmatic — это простой генератор градиентов с кликабельными кнопками, которые помогут вам настроить выбор цвета, остановку и вращение. С помощью этого инструмента пользователи могут создавать линейные или радиальные градиенты.

Начните с одного из простых пресетов — тут вы найдете некоторые хорошие монохроматические варианты — и настраивайте его, пока вы не получите необходимый вам градиент. Затем скопируйте код, и вы готовы к работе.

Ultimate CSS Gradient Generator 

Ultimate CSS Gradient Generator очень похож на CSSmatic, и у этих инструментов даже почти одинаковые экранные функции, однако у него есть и другая функциональность.

Инструмент включает в себя диаграмму совместимости браузера, несколько цветовых форматов, возможность импорта градиентного изображения и более 135 пользовательских пресетов. Пользователи также могут импортировать градиенты из существующего CSS и вносить коррективы. Это может быть отличным вариантом для настройки градиента на вашем сайте, который просто выглядит не совсем так, как вы хотите.

ColorSpace 

ColorSpace — это еще один полноэкранный градиентный инструмент с высоко визуальным веб-сайтом. Он довольно простой в использовании. Выберите ориентацию градиента (линейную или радиальную), добавьте два цвета с помощью кнопок и средства выбора цвета, затем нажмите кнопку «Создать».

Хотя этот инструмент все еще находится в стадии бета-версии, он работает хорошо, а код виден прямо на экране для копирования в проекты. Все, что вам нужно от визуализации градиента в CSS, находится прямо на экране. И если вам не нравятся ваши цветовые решения, их легко изменить и просто снова нажать «Создать».

CSS Gradient Generator 

CSS Gradient Generator производит код, используя простой графический интерфейс пользователя, а сам CSS будет работать во всех браузерах, поддерживающих CSS3.

Генератор позволяет создавать линейные и радиальные градиенты, а также имеет возможность импортировать существующий код градиента CSS для редактирования. Он также поставляется с несколькими пресетами для запуска ваших градиентных визуализаций.

CSS3 Factory 

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

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

CSS-Gradient 

CSS-Gradient является генератором плюс учебником по градиентам. Инструмент включает в себя боксы для выбора двух вариантов цвета в Hex или RGB, направленных, линейных или радиальных. Так что этот инструмент лучше всего подходит, если вы имеете представление о том, какие цвета вы хотите использовать. Просто скопируйте код и примените его к своему дизайну. 

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

GradientGenerator 

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

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

Вы можете щелкнуть, чтобы скопировать CSS, загрузить PNG, захватить QR-код для тестирования на мобильном устройстве или создать ссылку на общий ресурс. Этот инструмент также имеет другие расширенные параметры конфигурации, с которыми вы можете играть, включая тип генерируемого кода.

Вывод

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

Затем все, что вам нужно сделать, это скопировать код и вставить его в свой файл CSS, чтобы начать работу. Генератор градиентов CSS — это быстрый и простой способ создать градиент веб-сайта, который вам понравится, и который будет прост в использовании. Мы надеемся, что один из вариантов в этом списке отлично будет работать вас.

Всем успешной работы!

Источник

Линейные градиенты • Про CSS

CSS-градиенты позволяют сделать фон из двух и более цветов, плавно переходящих из одного в другой. Они с нами уже достаточно давно, и имеют довольно неплохую поддержку браузерами. Большинство современных браузеров понимает их без префиксов, для IE9 и старше есть Gradient Filter, также для IE9 можно использовать SVG.

Спецификация: w3.org/TR/css3-images/#gradients.

Градиенты могут быть использованы везде, где используются картинки: в фонах, в качестве буллетов списков, они могут быть заданы в content или border-image.

linear-gradient

Линейные градиенты достаточно просты в использовании. Для самого элементарного градиента достаточно задать начальный и конечный цвета:

background: linear-gradient(orangered, gold);

Цветов может быть любое количество больше двух. Также можно управлять направлением градиента и границами (точками остановки) цветов.

Угол или направление градиента

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

В градусах: от 0 до 360, например 270deg.

Ключевыми словами:

to top = 0deg;

to right = 90deg;

to bottom = 180deg — значение по умолчанию;

to left = 270deg.

Ключевые слова можно сочетать между собой, чтобы получить диагональный градиент, например to top left.

Ниже можно увидеть как работают разные направления в растяжке от сиреневого до желтого:

Вот код самого первого квадрата, для примера:

.top-left {
   background: linear-gradient(to top left, purple, crimson, orangered, gold);
}

Следует помнить, что to top right не то же самое, что 45deg. Цвета градиента располагаются перпендикулярно линии направления градиента. При to top right линия идет из нижнего левого в верхний правый угол, при 45deg — располагается строго под этим углом независимо от размеров фигуры.

Разница хорошо видна на прямоугольных фигурах:

Управление положением цветов

Значения точек остановки для цветов градиента задаются в единицах или в процентах и могут быть больше 100% и меньше 0%.

Примеры задания значений в %, в em и значения, выходящие за границы элемента:

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

Так можно сделать, например, фон под боковую колонку, растянутый на всю высоту родительского элемента:

Полоски на фоне сайдбара — ещё один градиент, состоящий из чередования полной прозрачности и белого цвета с прозрачностью 30%. Градиенты с полупрозрачными цветами удобны тем, что их можно наложить поверх фона любого цвета.

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

При отсутствии ограничений код может быть гораздо короче:

.light {
  background: peachpuff linear-gradient(90deg,
    rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .4) 50%
  ) center center / 2em;
}

.dark {
  background: steelblue linear-gradient(
    rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .2) 50%
  ) center center / 100% 1em;
}

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

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

Также важно знать, что ключевое слово transparent означает прозрачный черный, а не прозрачный белый, поэтому при его использовании в Firefox можно получить вот такую неприятность:

Действующий пример (смотреть в Firefox): jsbin.com/OvOwEma/2/edit.

Чтобы этого избежать, используйте полностью прозрачные цвета нужного оттенка, например, белый: rgba(255, 255, 255, 0) или черный rgba(0, 0, 0, 0). Про разные способы задавать цвета можно почитать здесь.

Чтобы узнать rgb-нотацию конкретного цвета, можно воспользоваться leaverou.github.io/css-colors, инструментом от Lea Verou.

repeating-linear-gradient

Помимо обычного linear-gradient можно сделать repeating-linear-gradient — повторяющийся градиент

Примерный код:

background: repeating-linear-gradient(
  green, green .5em,
  transparent .5em, transparent 1em
);

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

Upd. от 3.07.20: в данный момент повторяющиеся градиенты корректно отрисоваются в большинстве браузеров, и ими можно свободно пользоваться.

Ограничения

Градиенты имеют такое же ограничение, что и box-shadow: им нельзя задавать отдельно цвета или направление. Это приводит к дублированию кода и острой потребности воспользоваться препроцессорами в случае создания сложных градиентов.

Другое ограничение состоит в том, что градиенты не анимируются, что, впрочем, можно до какой-то степени обойти.

Для быстрого создания кроссбраузерных градиентов есть очень удобный инструмент: colorzilla.com/gradient-editor/. Помимо кода для современных браузеров, он предложит код для старых IE и SVG для 9-го.

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

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

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

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

Поэтому я сделала для вас подборку из 7 бесплатных инструментов для создания CSS градиентов.

И так, поехали!

WebGradients

На WebGradients вы найдете целую коллекцию готовых градиентов разных цветов и стилей.

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

Если вы обратите внимание на верхнюю навигацию сайта, то там вы найдете ссылки для загрузки этих градиентов как в PSD, так и в файле Sketch.

Вы также можете скопировать градиенты как код CSS3, а затем добавить его прямо на сайт. Здесь нет неправильных ответов — здесь просто много градиентов.

uiGradients

Обратите внимание на библиотеку uiGradients для создания интересных вариантов css градиентов.

В верхней навигации (слева) вы увидите кнопку с надписью «Show all gradients» (показать все градиенты). Нажмите на нее, чтобы просмотреть огромный список различных стилей градиента. Серьезно, их там очень много.

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

CSS аниматор градиентов

Итак, градиентная анимация. Сервис Gradient Animator — идеальный способ воплотить это в реальность. Все может работать прямо через CSS3 без необходимости использовать JavaScript.

На боковой панели нажмите «Add colour» (добавить цвет) и выберите поочередно два цвета вашего градиента. Измените скорость перехода, измените направление, затем нажмите «Preview»(предварительный просмотр).

Уверена, что вы оцените преимущество этого онлайн сервиса.

Редактор градиента Colorzilla

Каждый веб-дизайнер должен знать о редакторе градиента Colorzilla.

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

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

ColorSpace градиенты

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

У этого сервиса градиентов, более простой интерфейс, чем у Colorzilla.  Элементы управления довольно очевидны. Единственный минус в том, что на ColorSpace можно выбрать только два цвета за раз.

На Colorzilla вы можете составить градиент из нескольких цветов. Но это не означает, что ColorSpace хуже. Это значит, что его лучше всего использовать для простых градиентов.

Бесконечные градиенты

Да, это именно то, на что похоже. Бесконечный градиент.

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

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

К сервису прилагается подробная инструкция, находится она здесь.

Градиентные кнопки

И напоследок, кнопочки.

Бесплатная библиотека с открытым исходным кодом, наполненная различными дизайнами кнопок.

Библиотека проста в использовании и имеет множество градиентов на выбор.

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

Заключение

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

Стоит ли мне продолжать выкладывать подобные подборки?

Не забудьте добавить сайт в закладки. Здесь будет много всего полезного для веб-дизайнеров и фрилансеров.

Нашли ошибку? Выделите фрагмент текста и нажмите CTRL+ENTER

html5 — Как анимировать радиальный градиент с помощью CSS?

Решение SVG

Все фильтры, градиенты, маски, клипы пришли в CSS из SVG. Поэтому необходимо добавить решение c SVG градиентами.

Всё в принципе повторю из css решения, те же цвета в stop-color, те же проценты в stop offset, но анимация получается более мощной и зрелищной.

Горизонтальное перемещение градиента

Анимация достигается изменением значения параметра fx радиального градиента, отвечающего за горизонтальную координату центра градиента.

Запуск анимации — клик по прямоугольнику

<div>
  
  <svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 400 100">
   <defs>
   <radialGradient  fx="0%" fy="5%" r="200%"
           >
     <stop offset="0%" stop-color ="#FFFFFF" />
	  <stop offset="4%" stop-color ="#ffb3ff" />
	   <stop offset="12.25%" stop-color ="#ff33ff" />
	    <stop offset="31.25%" stop-color ="#800080" />
	     <stop offset="50%" stop-color ="#b300b3" /> 
		 
   </radialGradient>
   </defs> 
    <g > 
   <rect fill="url(#radGrad)" x="5%" y="5%" rx="10%"  /> 
      <text x="50%" y="60%" font-size="28px"  text-anchor="middle" font-weight="bold" font-family="sans-serif" fill="#FFDD00" > Sun shine </text>
	</g>  
    <animate xlink:href="#radGrad"
	  attributeName="fx"
	  dur="2s"begin="gr1.click"
	  values="0%;50%;50%;100%;0%"
	  repeatCount="1"
	  restart="whenNotActive" />
  </svg>
</div>

Атрибут keyTimes обеспечивает неравномерность движения, количество значений должно равняться количеству значений в атрибуте values Подробнее здесь.

  values="0%;50%;50%;100%;0%"
keyTimes="0;0.1;0.5;0.9;1"

Вертикальная анимация градиента

В этом случае анимируется fy

<div>
  
  <svg xmlns="http://www. w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 400 100">
   <defs>
   <radialGradient  fx="48%" fy="0%" r="200%"
           >
     <stop offset="0%" stop-color ="#FFFFFF" />
	  <stop offset="3%" stop-color ="#ffb3ff" />
	  <stop offset="12.25%" stop-color ="#ff33ff" />
	  <stop offset="31.25%" stop-color ="#800080" />
	    <stop offset="50%" stop-color ="#b300b3" /> 
		 
   </radialGradient>
   </defs> 
    <g > 
   <rect fill="url(#radGrad)" x="5%" y="5%" rx="10%"  /> 
      <text x="50%" y="60%" font-size="28px"  text-anchor="middle" font-weight="bold" font-family="sans-serif" fill="#FFDD00" > Sun shine </text>
	</g>  
    <animate xlink:href="#radGrad"
	  attributeName="fy"
	  dur="2s"begin="gr1.click"
	  values="0%;50%;50%;100%;50%;50%;0%"
	  repeatCount="1"
	  restart="whenNotActive" />
  </svg>
</div>

Анимация по диагонали

Анимируются одновременно оба параметра fx, fy

<div>
  
  <svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 400 100">
   <defs>
   <radialGradient  fx="0%" fy="0%" r="200%">
     <stop offset="0%" stop-color ="#FFFFFF" />
	  <stop offset="3%" stop-color ="#ffb3ff" />
	  <stop offset="12.25%" stop-color ="#ff33ff" />
	  <stop offset="31.25%" stop-color ="#800080" />
	  <stop offset="50%" stop-color ="#b300b3" /> 
		 
   </radialGradient>
   </defs> 
    <g > 
   <rect fill="url(#radGrad)" x="5%" y="5%" rx="10%"  /> 
      <text x="50%" y="60%" font-size="28px"  text-anchor="middle" font-weight="bold" font-family="sans-serif" fill="#FFDD00" > Sun shine </text>
	</g>  
    <animate xlink:href="#radGrad"
	  attributeName="fy"
	  dur="2s"begin="gr1. click"
	  values="0%;50%;50%;100%;50%;50%;0%"
	  repeatCount="1"
	  restart="whenNotActive" />
	     <animate xlink:href="#radGrad"
	  attributeName="fx"
	  dur="2s"begin="gr1.click"
	  values="0%;50%;50%;100%;50%;50%;0%"
	   repeatCount="1"
	  restart="whenNotActive" />
  </svg>
</div>

Анимация по наведению курсора

Условие запуска анимации: begin="rect1.mouseover"

<style>
 
</style>
<div>
  
  <svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 400 100">
   <defs>
   <radialGradient  fx="0%" fy="5%" r="200%"
           >
     <stop offset="0%" stop-color ="#FFFFFF" />
	  <stop offset="4%" stop-color ="#ffb3ff" />
	  <stop offset="12.25%" stop-color ="#ff33ff" />
	  <stop offset="31.25%" stop-color ="#800080" />
	  <stop offset="50%" stop-color ="#b300b3" /> 
		 
   </radialGradient>
   </defs> 
    <g > 
   <rect fill="url(#radGrad)" x="5%" y="5%" rx="10%"  /> 
      <text x="50%" y="60%" font-size="28px"  text-anchor="middle" font-weight="bold" font-family="sans-serif" fill="#FFDD00" > Sun shine </text>
	</g>  
    <animate xlink:href="#radGrad"
	  attributeName="fx"
	  dur="1s"
	  begin="rect1.mouseover"
	   values="0%;100%;0%"
	   repeatCount="1"
     fill="freeze"
	   />
  </svg>
</div>

Конические градиенты — уже сегодня! — CSS-LIVE

Перевод статьи Conical gradients, today! с сайта lea.verou.me, автор — Лиа Веру.

Не секрет, что я люблю конические градиенты. Ещё в 2011 году я написала черновик для conical-gradient() в CSS, который помог Табу при добавлении их в «Изображения в качестве CSS-значений 4 уровня» в 2012-м, как он потом признался. Но спустя три года их даже не попытались реализовать. Конечно, спецификация еще довольно «сырая», но не из-за этого конические градиенты не получили поддержки. Бывали экспериментальные реализации и куда хуже описанных функций. Причина, по которой конические градиенты всё ещё не реализованы — мало разработчиков знают о них, поэтому браузеры не видят в них нужды.

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

Недавно на нескольких конференциях я выступала с докладом про создание круговых диаграмм при помощи CSS, и в очередной раз вспомнила, насколько полезными могут быть конические градиенты. Если каждое CSS- или SVG-решение требует нескольких строчек кода разной степени хакообразия, конические градиенты позволяют нам получить круговую диаграмму одной лаконичной строкой, без «воды» в виде самоповторов. Например, вот так можно создать круговую диаграмму для соотношения 60% (золотой цвет) на 40% (цвет #f06):

padding: 5em; /* size */
background: conic-gradient(gold 40%, #f06 0);
border-radius: 50%; /* make it round */

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

Кроме того, я напоминаю разработчикам, как важно высказываться, чтобы добиться реализации желаемых функций. Браузеры реализуют в первую очередь те функции, о которых просят разработчики. Жаль, что мало кто из нас осознает, как велико наше совместное влияние на это. Это более очевидно в случае Микрософта с их форумом «Uservoice», где разработчики могут голосовать, реализация каких функций им нужнее, но почти все основные браузеры ведут себя аналогично. Они отслеживают, чего хотят разработчики и что реализуют другие браузеры, и принимают соответствующее решение. Под лежачий камень ни одна функция не потечет, так что если хотите, чтобы что-то было реализовано, высказывайтесь.

Поскольку «высказываться» может показаться чем-то расплывчатым («высказываться где?» — уже слышу ваш вопрос), я также отправила баг-репорты для всех основных браузеров, которые можно найти на странице полифила, так что можете оставить в них свой голос или комментарий. Впрочем, это не значит, что высказываться в блогах или соцсетях бесполезно: именно для этого у браузеров есть команды по связям с разработчиками. Чем больше шума по поводу нужных нам функций мы вместе поднимем, тем больше вероятность, что нас услышат. И всё же шансы выше, если мы направим наши голоса туда, где разработчики браузеров готовы прислушаться, и наш голос будет громче и убедительнее, если мы сосредоточим его в одних местах, а не распылим на множество отдельных голосов.

Кроме того, я использую здесь термин «шум» в переносном смысле. Хотя ясно дать понять, что мы заинтересованы в определённой функции — уже само по себе ценно, еще важнее объяснить, почему. Привести примеры использования — значит не только привлечь больше внимания браузеров, но и убедить других разработчиков.

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

P.S. Это тоже может быть интересно:

CSS3 повторение градиента

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

Тест о котором я упоминал в описании находится здесь: Тест CSS3. Стандарт оформления HTML документов

Реальный пример работы вы можете увидеть и скачать ниже:

Посмотреть примерСкачать

Как использовать?(простое повторение градиента)

Синтаксис очень похож на определение простого линейного или радиального градиента, но при этом еще используется еще одно слово-приставка в начале и указываются цвета и направление повторения. Чтобы повторять линейный градиент нужно использовать свойство repeating-linear-gradient, а чтобы повторять радиальный нужно использовать функцию repeating-radial-gradient:

1
2
3
4
5
6
7
8
9

/*Линейный*/  
.gradient {  
    background: repeating-linear-gradient(0deg, #f9f9f9, #cccccc 20px);   
}  
 
/*Радиальный*/  
.gradient {  
    background: repeating-radial-gradient(50% 50%, circle, #f9f9f9, #cccccc 20px);    
}

(Создание шаблона для повторений)

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

HTML часть

Для этого нам нужен лишь один <div> и никаких изображений, только CSS3:

1
2

<div>
</div>

CSS3 часть

1
2
3
4
5
6
7
8
9
10

.gradient {  
    width: auto;  
    height: 500px;  
    margin: 0 50px;  
    background: -webkit-repeating-linear-gradient( 0deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);  
    background: -moz-repeating-linear-gradient( 0deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);  
    background: -o-repeating-linear-gradient( 0deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);  
    background: repeating-linear-gradient( 0deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);  
    background-size: 100% 21px;  
}

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

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

1
2
3
4
5
6
7
8
9

.gradient:before {  
    content: "";  
    display: inline-block;  
    height: 500px;  
    width: 4px;  
    border-left: 4px double #FCA1A1;  
    position: relative;  
    left: 30px;  
}

Вывод

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

Успехов!

Источник: http://www.hongkiat.com/blog/css3-repeating-gradients/

— CSS: каскадные таблицы стилей

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

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.

Градиент CSS не имеет внутренних размеров; я.е., он не имеет естественного или предпочтительного размера или предпочтительного соотношения. Его конкретный размер будет соответствовать размеру элемента, к которому он применяется.

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

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

Линейные градиенты последовательно переходят цвета вдоль воображаемой линии. Они генерируются с помощью функции linear-gradient () .

Радиальный уклон

Радиальные градиенты переходят цвета постепенно от центральной точки (исходной точки).Они генерируются с помощью функции radial-gradient () .

Конический градиент

Конические градиенты постепенно переходят цвета по кругу. Они генерируются с помощью функции conic-gradient () .

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

Пример линейного градиента

Простой линейный градиент.

  .linear-gradient {
  фон: linear-gradient (вправо,
      красный, оранжевый, желтый, зеленый, синий, индиго, фиолетовый);
}  

Пример радиального градиента

Простой радиальный градиент.

  .radial-gradient {
  фон: радиально-градиентный (красный, желтый, rgb (30, 144, 255));
}
  

Примеры повторяющегося градиента

Примеры простого повторяющегося линейного и радиального градиента.

  .linear-repeat {
  фон: повторяющийся линейный градиент (вверху слева,
      светло-розовый, светло-розовый 5 пикселей, белый 5 пикселей, белый 10 пикселей);
}

.radial-repeat {
  фон: повторяющийся радиальный градиент (синий порошок, синий порошок 8 пикселей, белый 8 пикселей, белый 16 пикселей);
}  

Пример конического градиента

Пример простого конического градиента. Обратите внимание, что это пока не поддерживается широко в браузерах.

  .conic-gradient {
  фон: конический градиент (светло-розовый, белый, пудрово-синий);
}
  

таблицы BCD загружаются только в браузере

Make Beautiful CSS Gradients [& SVG]

Как создавать красивые маслянисто-гладкие градиенты

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

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

В RGB все богатых, насыщенных цветов находятся в углах (во всяком случае, 6 из них).Центр серый.

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

Чтобы исправить это, вам нужно интерполировать иначе . (Да)

Наверное, проще всего просто показать вам:

Чтобы получить градиент, избегающий серой мертвой зоны, вы не рисуете прямую линию от A до B, вы рисуете кривую biiiig .

К счастью, это очень просто, если мы будем интерполировать в цветовую систему на основе оттенков 🤓. Дизайн-приложения и CSS не делают этого за вас — поэтому я создал этот инструмент!

Цветовые градиенты в HCL, HSB и HSL

В этом инструменте (в настоящее время) вы можете создавать градиенты в 3 различных цветовых системах, которые дают несколько разные результаты:

• HCL (оттенок-цветность-яркость) : выбор этого инструмента по умолчанию, HCL — это потрясающая цветовая система , которая не только создает красивые, насыщенные градиенты в широком диапазоне оттенков, но и делает это с плавным восприятием способ.Если бы вы просматривали градиент в оттенках серого, вы бы увидели только плавный переход от более светлого к более темному серому, предотвращая ужасные «полосы», которые вы видите в некоторых вручную подобранных градиентах. (Примечание: перцептивно однородная природа HCL также делает его отличным для цветовых палитр визуализации данных)
• HSB (оттенок-насыщенность-яркость) : Хотя восприятие не является однородным, иногда HSB предлагает более интересный (и яркий) вариант градиента между двумя остановками.В частности, если ваш градиент HCL имеет уродливый коричнево-желтый цвет, попробуйте проверить версию HSB. HSB — фантастическая цветовая система для дизайнеров, и я написал подробное руководство по HSB.
• HSL (оттенок-насыщенность-легкость) : HSB и HSL часто очень похожи, особенно в ярких градиентах. Тем не менее, иногда стоит посмотреть и то, и другое. Также обратите внимание на розовую «полосу» в градиенте HSL выше — это, по сути, небольшой всплеск яркости, вызванный артефактами использования неперцептуальной цветовой системы.Используйте HCL, чтобы избежать этого. (Также: меня часто спрашивают о разнице между HSB и HSL)

Экспорт градиента как изображения SVG

Необходимо использовать один из этих градиентов в вашем дизайнерском приложении — например, Figma, Sketch или Adobe XD?

Просто — просто нажмите «Экспорт SVG» и перетащите файл прямо в свое дизайнерское приложение.

Но что, если вы разрабатываете в браузере? Нет проблем — просто возьмите…

Градиент CSS (для линейных, радиальных и конических градиентов)

Получить градиентный CSS для любого из 3-х типов градиентов очень просто.

Просто нажмите «Копировать CSS» и добавьте код к нужному элементу.

Примечание: если у вас есть другие свойства фона, заданные для рассматриваемого элемента, вы можете изменить свойство с background на background-image 👍

Подробнее о цвете

Чтобы узнать больше о цветных инструментах и ​​статьях об использовании цвета в дизайне пользовательского интерфейса, посетите:

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

25 CSS-градиентов для вашего следующего проекта

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

 .stripe {
  фон: линейный градиент (вправо, # 1fa2ff, # 12d8fa, # a6ffcb);
} 

.flare {
  фон: linear-gradient (справа, # f12711, # f5af19);
} 

 .vanusa {
  фон: linear-gradient (справа, # da4453, # 89216b);
} 

 .sublime-light {
  фон: linear-gradient (справа, # fc5c7d, # 6a82fb);
} 

 .bighead {
  фон: linear-gradient (справа, # c94b4b, # 4b134f);
} 

 .velvet-sun {
  фон: linear-gradient (справа, # e1eec3, # f05053);
} 

 .argon {
  фон: линейный градиент (вправо, # 03001e, # 7303c0, # ec38bc, # fdeff9);
} 

.небесный {
  фон: linear-gradient (справа, # c33764, # 1d2671);
} 

 .relay {
  фон: linear-gradient (справа, # 3a1c71, # d76d77, # ffaf7b);
} 

 .crystal-clear {
  фон: linear-gradient (справа, # 159957, # 155799);
} 

 .ibiza-sunset {
  фон: linear-gradient (справа, # ee0979, # ff6a00);
} 

 .fresh-turboscent {
  фон: linear-gradient (справа, # f1f2b5, # 135058);
} 

. Cheer-up-emo-kid {
  фон: linear-gradient (справа, # 556270, # ff6b6b);
} 

.starfall {
  фон: linear-gradient (справа, # f0c27b, # 4b1248);
} 

 .nelson {
  фон: линейный градиент (справа, # f2709c, # ff9472);
} 

 .forever-lost {
  фон: линейно-градиентный (справа, # 5d4157, # a8caba);
} 

 .blurry-beach {
  фон: linear-gradient (справа, # d53369, # cbad6d);
} 

 .influenza {
  фон: linear-gradient (справа, # c04848, # 480048);
} 

 .jshine {
  фон: линейный градиент (вправо, # 12c2e9, # c471ed, # f64f59);
} 

.Calm-darya {
  фон: linear-gradient (справа, # 5f2c82, # 49a09d);
} 

 .titanium {
  фон: линейно-градиентный (справа, # 283048, # 859398);
} 

 .pinky {
  фон: linear-gradient (справа, # dd5e89, # f7bb97);
} 

 .purple-paradise {
  фон: linear-gradient (справа, # 1d2b64, # f8cdda);
} 

 .horizon {
  фон: linear-gradient (справа, # 003973, # e5e5be);
} 

. От полудня до заката {
  фон: линейный градиент (вправо, # ff6e7f, # bfe9ff);
} 

Изображение предоставлено: Тоа Хефтиба на Unsplash

CSS-градиенты: ускоренный курс по синтаксису

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

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

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

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

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

  .example {
  фон: линейный градиент (
    [направление], [первый цвет], [второй цвет], [другие цвета ...]
  );
}  

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

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

  .example {
  фон: линейно-градиентный (вправо, хотпинк, лайтпинк);
}  

См. «Линейный градиент» слева направо от SitePoint (@SitePoint) на CodePen.

Старые браузеры поддерживают немного другой синтаксис и требуют префиксов браузера.В старых версиях браузеров вместо указания конечной точки вы указываете начальную точку. Код градиента CSS3 для старых браузеров выглядит так:

  .example {
    фон: -prefix-linear-gradient (левый, красный, синий);
}  

Указание углов для линейных градиентов

Если вам нужно создать градиент под определенным углом, вы можете указать его напрямую. Приведенный ниже код создает градиент под углом 60 градусов.

  .example {
  фон: линейно-градиентный (60град, красный, синий);
}  

Считая, что линия снизу вверх находится под нулевым градусом, угол увеличивается, если линия движется по часовой стрелке.Например:

  .example {
  фон: линейный градиент (0 градусов, красный, синий);
}  

Это создаст градиент с красным внизу и синим вверху. В то время как следующее создаст горизонтальный градиент с красным слева и синим справа:

  .example {
  фон: линейно-градиентный (90 градусов, красный, синий);
}  

Посмотрите линейные градиенты пера под разными углами от SitePoint (@SitePoint) на CodePen.

Указание точек цвета в линейных градиентах

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

  .example {
  фон: линейный градиент (
    вниз, желтый, красный 70%, черный
  );
}  

Если стопы не указаны, цвета будут равномерно распределены.

См. Линейный градиент пера с цветовыми ограничителями от SitePoint (@SitePoint) на CodePen.

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

Радиальные градиенты менее распространены и более сложны. Это синтаксис для радиальных градиентов:

  .example {
  фон: радиальный градиент (
    [форма] [размер и положение], [первый цвет], [другие цвета ...], [последний цвет]
  );
}  

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

 .пример {
  фон: радиально-градиентный (желтый, красный, черный);
}  

См. Пример радиального градиента пера от SitePoint (@SitePoint) на CodePen.

Изменение размера радиального градиента

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

Давайте рассмотрим пример, чтобы прояснить это. Мы создадим четыре градиента на четырех элементах:

В приведенном ниже CSS я использую четыре значения ключевых слов:

  .gradient1 {
  фон: радиально-градиентный (крайний угол круга, красный, черный);
}

.gradient2 {
  задний план:
   радиально-градиентный (круг крайний, красный, черный);
}

.gradient3 {
  фон: радиально-градиентный (круг ближний, красный, черный);
}

.gradient4 {
  фон: радиально-градиентный (круг в ближайшем углу, красный, черный);
}  

См. Радиальные градиенты пера с разными значениями ключевых слов от SitePoint (@SitePoint) на CodePen.

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

Определение точек цвета в радиальных градиентах

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

  .example {
    фон: радиальный градиент (
      круг с ближайшей стороны 20% 50%, желтый, красный 70%, черный
    );
}  

См. Радиальный градиент пера с цветовыми ограничителями от SitePoint (@SitePoint) на CodePen.

Повторяющиеся градиенты

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

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

Повторяющиеся линейные градиенты

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

 .пример {
  фон: повторяющийся линейный градиент (
    45 градусов, красный, красный 5 пикселей, белый 5 пикселей, белый 10 пикселей
  );
}  

См. Повторяющийся линейный градиент пера от SitePoint (@SitePoint) на CodePen.

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

  фон:
  повторяющийся линейный градиент (
    -45deg, rgba (255, 0, 0, 0.2), rgba (255, 0, 0, 0.2) 5 пикселей,
    прозрачный 5px, прозрачный 10px
  ),
  повторяющийся линейный градиент (45 градусов, rgba (255, 0, 0, 0,2),
    rgba (255, 0, 0, 0.2) 5 пикселей, белый 5 пикселей, белый 10 пикселей
  );  

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

См. «Повторяющийся линейный градиент пера с несколькими градиентами» от SitePoint (@SitePoint) на CodePen.

Повторяющиеся радиальные градиенты

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

  .example {
  фон: повторяющийся радиальный градиент (
    круг, черный, черный 6 пикселей, красный 6 пикселей, красный 10 пикселей
  );
}  

См. Повторяющийся радиальный градиент пера от SitePoint (@SitePoint) на CodePen.

Вы также можете наложить несколько повторяющихся радиальных градиентов, например:

  .example {
  задний план:
   повторяющийся радиальный градиент (
     самый дальний угол при 10% 10%, rgba (0, 0, 0, 0,7),
     rgba (0, 255, 0, 0.2) 15 пикселей, rgba (0, 255, 0, 0,1) 25 пикселей
   ),
   повторяющийся радиальный градиент (
     ближайший угол 90% 90%,
     rgba (0, 0, 0, 0,7), rgba (255, 0, 0, 0,2) 15 пикселей,
     rgba (255, 0, 0, 0.1) 25 пикселей
   ),
   повторяющийся радиальный градиент (
     самый дальний угол при 10% 90%, rgba (0, 0, 0, 0,7),
     rgba (0, 255, 0, 0,2) 15 пикселей, rgba (0, 255, 0, 0,1) 25 пикселей
   );
 }  

См. Повторяющийся радиальный градиент пера с несколькими градиентами от SitePoint (@SitePoint) на CodePen.

Заключение

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

Как анимировать градиенты в CSS и React

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

Обожаю градиенты.После стольких лет использования однотонных цветов и плоского дизайна я рад их возвращению!

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

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

Этот подход вроде бы работает, но есть проблемы:

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

• Это просто не так хорошо выглядит; Я хотел что-то с естественным течением, и это казалось статичным и безжизненным.

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

Без лишних слов, новая кнопка:

Magic Rainbow Button

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

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

Большая разница здесь в том, что на самом деле ничего не движется . На 2D-плоскости больше не происходит перевода. Вместо этого я беру 3 цвета из 10-цветной палитры радуги, и каждая точка градиента медленно смещается, чтобы унаследовать цвет из предыдущей точки. Точка C3 всегда на 1 цвет отстает в палитре от точки C2 .

Это создает иллюзию движения, похожую на те огни казино или других заведений:

Это также похоже на то, как звуковые волны движутся по воздуху! Я создал доступное для исследования объяснение, демонстрирующее эту концепцию.

Итак, план игры складывался:

• Я бы создал палитру из 10 цветов радуги.

• Я бы установил градиент, чтобы удерживать движущееся окно из 3 цветов.

• Я бы запустил интервал, который обновлял бы градиент каждую секунду, сдвигая каждый цвет на 1 точку.

• Я бы переходил между цветами в каждой точке. На каждом кадре цвета должны приближаться к своему следующему значению.

Последний шаг был самым сложным. К сожалению, вы не можете использовать , переход для интерполяции между фоновыми градиентами. Следующий фрагмент не работает:

 
 I  мог бы  сделать все это на JS. Я мог бы настроить цикл  requestAnimationFrame , который разбивает каждый переход цвета на ~ 60 инкрементальных шагов.Мне эта идея не понравилась, она казалась слишком сложной. Кроме того, поскольку все это будет происходить в основном потоке в JavaScript, анимация может стать прерывистой в периоды занятости. 
 
 Я хотел сделать интерполяцию в CSS. И, к счастью, я нашел способ 😊 
 
 Некоторое время назад в CSS были переменные. На первый взгляд, они очень похожи на переменные, которые вы видели в SASS или LESS, но, в отличие от препроцессоров, переменные все еще присутствуют в коде во время выполнения. Это делает их намного мощнее, как мы скоро увидим! 
 
 Вот как вы можете использовать настраиваемые свойства CSS в градиенте: 
 
 
 Мы можем использовать встроенные стили, чтобы установить это в элементах React, например: 
 
 
 Само по себе это нам не помогает.Мы по-прежнему не можем применить  переход  непосредственно к  фону . Но это приближает нас на один шаг вперед 🕵🏻‍♂️ 
 
 CSS Houdini — это обширный набор грядущих улучшений CSS, основанных на одной идее: разработчики должны иметь возможность создавать свои собственные функции CSS. 
 
 Например, CSS не имеет встроенного способа делать макеты кладки. Было бы здорово, если бы вы могли построить его, подключившись напрямую к механизмам CSS, а затем получить к нему доступ с помощью  display: masonry ? 
 
 Другой пример: такие проекты, как Babel, позволяют нам «полифиллировать» (большинство) отсутствующих функций в JS, потому что мы можем имитировать эти новые функции, используя более раннюю версию языка.Но мы не можем использовать полифиллы (большинство) функций CSS. Houdini позволит нам полифилить отсутствующий CSS, предоставляя нам доступ к внутренней проводке движка CSS. 
 
 CSS Houdini — это огромный проект, который уже много лет занимается исследованиями и разработками, и я ожидаю, что он будет формировать будущее веб-разработки захватывающим и непредсказуемым образом. Однако сегодня я хотел бы сосредоточиться на одной относительно небольшой, но невероятно интересной части:  анимированных настраиваемых свойств . 
 
 В CSS «свойство» — это то, чему вы можете присвоить значение. display  и  transform  и  color  — все это примеры свойств. Почему же тогда  переменных  в CSS называются  настраиваемыми свойствами ? Разве это не совсем другое понятие? 
 
 На самом деле они больше похожи, чем я думал. Переменные CSS лучше рассматривать как свои собственные свойства, такие как отображение и преобразование. 
 
 
 Вот дикая, умопомрачительная часть: вы можете  переходить настраиваемые свойства : 
 
 
 Мы не говорим браузеру анимировать свойство фона  , мы говорим браузеру анимировать наше настраиваемое свойство  .А затем мы используем это настраиваемое свойство в нашем фоновом градиенте. Удивительно, но ключевое слово  var ()  является реактивным, заставляя фон перерисовывать каждый раз при изменении значения, даже когда это значение анимировано с помощью перехода  . 
 
 Мой мозг все еще гудит от возможностей. Настраиваемые свойства CSS намного круче, чем я предполагал, а Houdini дает нам совершенно волшебные силы ✨🧙✨ 
 
 
  
 Ссылка на этот заголовок 
 Еще одна деталь: регистрация свойства  
 Перед этим нам нужно сделать еще одну вещь действительно будет работать.Нам нужно сообщить браузеру, что такое , тип  нашего настраиваемого свойства. 
 
 Следует ли браузеру рассматривать это как цвет? Длина? Угол? Нам нужно четко указать на это, чтобы браузер знал, как интерполировать изменения. 
 
 Мы делаем это в JS с помощью следующего метода: 
 
 
 Чуть позже мы увидим, как хуки React позволяют нам довольно хорошо упаковать это. Однако сначала я хотел поделиться сырым JS-кодом для людей, использующих другой фреймворк или вообще не использующих фреймворк: 
 
 
. выражено.Пользовательские крючки позволяют нам запихивать кучу вещей в коробку, и мы сами должны рисовать коробки. Мы можем выбрать, хотим ли мы оптимизировать для повторного использования, ясности или чего-то еще. 
 
 В данном случае я бы хотел сохранить дружеские отношения. Я в порядке, пожертвовать немного мощностью или гибкостью в обмен на беспроблемный крючок  useRainbow  без излишеств. 
 
 
  
 Ссылка на этот заголовок 
 Состояние и API  
 Первоначально я думал, что сохраню текущие цвета в состоянии, но мне пришло в голову, что цвета являются производными данными;  реальных  бит состояния — это текущий счетчик интервалов.
 
 Если я, например, нахожусь на 5-м цикле, я знаю, что мои цвета будут 5-м, 6-м и 7-м цветами в моей 10-цветной палитре. Поскольку палитра статична, я могу просто отслеживать это число и использовать его для получения цветов. 
 
 Следующее, что я хотел выяснить, это интерфейс ловушки. Я начал с написания компонента, который будет использовать этот хук. Мне нравится просто придумывать любой API, который кажется идеальным для компонента, который его использует. Потребительская разработка. 
 
 
 Имея это в виду, вот начальная версия этой ловушки: 
 
 
 
 *  useIncrementingNumber  — это настраиваемая ловушка, которая выдает новое, постоянно увеличивающееся число на основе заданной интервальной задержки.Он основан на хуке Дэна Абрамова setInterval. Вы можете посмотреть его источник здесь. 
 
 
 Мне нравится этот подход, потому что существует четкое разделение обязанностей: 
 
 
   
  useRainbow  отвечает за создание цветов и управление ими, но не имеет права голоса в том, для чего они используются. 
 
 
   
 Компонент  MagicRainbowButton  ничего не знает о том, откуда эти цвета и когда они обновляются, но решает, что с ними делать.
 
 
 
 Есть одна вещь, которая заставляет меня немного покалывать; Довольно удивительно, что  useRainbow  тайно регистрирует глобальные настраиваемые свойства CSS. Фактически, регистрация глобального значения из экземпляра компонента будет проблематичной! Мы рассмотрим эту и некоторые другие нерешенные проблемы в следующем разделе. 
 
 Прежде чем вы начнете размещать радужные кнопки на веб-сайте вашей юридической фирмы или в бухгалтерском программном обеспечении, нам нужно подумать о нескольких вещах.
 
 
  
 Ссылка на этот заголовок 
 Глобальные свойства и повторяющиеся компоненты  
 Самая большая проблема нашей текущей реализации состоит в том, что она нарушает основной принцип React: каждый экземпляр компонента должен быть независимым. Мы должны иметь возможность визуализировать столько копий, сколько захотим, не мешая друг другу. 
 
 Если мы попытаемся отобразить две копии нашего  MagicRainbowButton  на одной странице, мы получим следующую ошибку: 
 
 
 InvalidModificationError: не удалось выполнить «registerProperty» в «CSS»: указанное имя уже зарегистрировано.
 
 
 Это связано с тем, что реестр настраиваемых свойств CSS является глобальным объектом; все экземпляры наших компонентов используют одно и то же глобальное пространство имен! И прямо сейчас они оба пытаются зарегистрировать одни и те же имена. 
 
 Я обошел это, создав уникальный идентификатор для каждого компонента React и сохранив его с хуком  useRef : 
 
 
 Это также заставляет меня чувствовать себя лучше по поводу «секретных побочных эффектов в хуках». Немного случайности исключает риск коллизии имен, позволяя нам притвориться, что на самом деле это не глобально.
 
 
  
 Ссылка на этот заголовок 
 Поддержка браузера  
 Houdini является суперсовременным, и это отражено в его поддержке браузером: на момент написания  CSS.registerProperty  поддерживается только Chrome 78+, и Opera 65+. 
 
 Мое решение? Выйдите из крючка раньше, если  window.CSS  или  CSS.registerProperty  не найдены и вернут первые 3 цвета. Другие браузеры не получат анимацию, но все равно получат красивый градиент! И наш компонент React вообще не должен меняться 💯 
 
 
 Примечание: IE11 вообще не поддерживает настраиваемые свойства, поэтому, если вам нужно его поддерживать, вам нужно будет установить резервный градиент фона, используя жестко заданный цвет. значения вместо настраиваемых свойств 
 
 
 
  
 Ссылка на этот заголовок 
 Производительность  
 В прошлом году я говорил о производительности анимации / взаимодействия.В этом выступлении я упомянул, что есть два свойства «золотого стандарта»: непрозрачность ,  и преобразование , . Эти два свойства работают намного лучше, чем другие свойства, потому что им не нужно рисовать в каждом кадре, ими можно манипулировать непосредственно графической картой как текстурой, перемещаясь без какой-либо работы ЦП. 
 
 В этом выступлении я, , также  выступал за нарушение этого правила, если вы измеряете. С  6x дроссельной заслонкой  на моем процессоре я запустил профилировщик: 
 
 Это правда, что этот метод включает перерисовку каждого кадра, и это перерисовка может быть медленной… но в этом случае объем перерисовки крошечный.Перекраска занимает  ~ 0,3 миллисекунды , что составляет около 2% нашего бюджета, если мы хотим достичь 60 кадров в секунду. 
 
 Анимация свойств, таких как  height , часто выполняется очень медленно, потому что она включает в себя этап  макета  и  рисования , а также потому, что количество задействованных пикселей может быть очень большим. В этом случае нет шага макета, а шаг рисования быстрый и целевой 💫 
 
 
  
 Ссылка на этот заголовок 
 Доступность  
 Причудливые штрихи — это здорово, но не тогда, когда они происходят за счет удобства использования.
 
 Некоторые типы анимации могут быть проблематичными для людей с вестибулярными расстройствами — они могут вызывать головокружение, тошноту, головные боли и другие неприятные симптомы. 
 
 Браузеры усердно работали над реализацией поддержки медиа-запроса «предпочитает уменьшенное движение». Этот запрос основан на настройке Windows / MacOS и позволяет пользователям выразить желание отключить анимацию. 
 
 Браузер поддерживает этот медиа-запрос значительно лучше и поддерживает Chrome, Firefox, Safari и (скоро) Edge.Мы настроим его так, чтобы мы включали анимацию только для людей, которые выбрали «без предпочтений» для движения, значение по умолчанию: 
 
 
 Этот метод может быть немного нелогичным — разве мы не хотели бы  отключить  анимацию для тех, кто выражает свои предпочтения? — но в большинстве случаев получается одно и то же. Исключение составляют люди, использующие старые браузеры, такие как Internet Explorer; в их случае медиа-запроса не существует. Это означает, что люди в браузерах  не увидят анимацию .Лучше принять более безопасное предположение. 
 
 Помимо движения, нам также нужно подумать о цветовом контрасте. Смогут ли люди с нарушениями зрения читать текст на кнопке? Я добавил немного тени текста и затемнил теплый конец спектра. По правде говоря, в определенные периоды анимации он может быть слишком малоконтрастным, но я уверен, что большую часть времени он разборчив, и анимация быстро меняется. 
 
 Если вы хотите создать свою собственную кнопку-радугу, исходный код для нее может пригодиться.Этот блог имеет открытый исходный код, поэтому вы можете найти его на Github. 
 
 Если вы действительно где-то используете этот эффект,  Я бы хотел его увидеть ! Напишите мне в Twitter или по электронной почте и дайте мне знать! 
 
 Это новый год, и одна из моих целей на 2020 год — создать много высококачественных интерактивных сообщений в блогах, подобных этой. Мой информационный бюллетень — лучший способ узнавать, когда публикуется что-то новое. 
 
 Я знаю, что забросал вас множеством кнопок «подписаться» на этот пост *, но этот последний действительно.Вы не присоединитесь к моему информационному бюллетеню? 
 
 Как использовать фоновые градиенты CSS в электронных письмах HTML | Maizzle 
  
 Многие почтовые клиенты поддерживают фоновые градиенты CSS. 
 
 В этом руководстве вы узнаете, как использовать плагин tailwindcss-gradient для добавления красочных градиентов в ваши HTML-шаблоны электронной почты.
Мы также расскажем, как добавить резервную копию, чтобы мы также отображали градиенты в Outlook, используя  VML . 
  
 Начало работы 
 
 Начнем с создания нового проекта Maizzle.
 
 Откройте окно терминала и выполните команду  new : 
 
  maizzle new  
 Следуйте инструкциям, используя  example-gradient  в качестве имени папки.
 Мы сказали, что будем использовать плагин  tailwindcss-gradient , так что давайте продолжим и установим его.
 Сначала  cd  в каталог проекта:
  cd example-gradient  
 Затем установите плагин с помощью NPM:
  npm install tailwindcss-gradient  
 По завершении откройте пример - градиенты  в вашем редакторе.
 CSS Gradients 
 Давайте настроим и используем  tailwindcss-gradient  с Tailwind CSS.
 Конфигурация Tailwind 
 Нам нужно указать Tailwind использовать плагин. Отредактируйте  tailwind.config.js  и  require ()  плагин внутри плагинов : [] массив :
 
module.exports = {
  плагины: [
    require ('tailwindcss-gradient'),
  ]
}  
 Затем нам нужно определить, какие градиенты мы хотим генерировать на основе каких цветов.Мы делаем это в теме : {} ключ  из  tailwind.config.js .
 Например, зарегистрируем линейные градиенты на основе существующей цветовой палитры:
 
module.exports = {
  тема: {
    linearGradientColors: theme => theme ('цвета'),
  }
}  
 Если вы запустите  maizzle build  и посмотрите на один из шаблонов в  build_local , вы увидите, что размер файла почти удвоился, а в нем много служебных классов градиента фонового изображения:
 .bg-gradient-t-transparent {
  фоновое изображение: линейный градиент (вверх, rgba (0, 0, 0, 0), прозрачный)! important;
}
  
 Причина такого количества классов в том, что  tailwindcss-gradient  выводит утилиты для всех комбинаций цветов, определенных в нашей конфигурации.
 Мы, конечно, можем изменить это и сгенерировать только несколько градиентов:
 
module.exports = {
  тема: {
    linearGradientColors: {
      'красный': '# f00',
      'красно-синий': ['# f00', '# 00f'],
      'красный-зеленый-синий': ['# f00', '# 0f0', '# 00f'],
      'черный-белый-с остановками': ['# 000', '# 000 45%', '#fff 55%', '#fff'],
    }
  }
}  
 Снова запустите  maizzle build , и теперь вы должны увидеть только 64 сгенерированных служебных класса.
  tailwindcss-gradient  может генерировать множество других типов градиентов (хотя не все из них поддерживаются в электронной почте). Просмотреть все варианты конфигурации.
 Использование в HTML 
 Просто добавьте служебный класс к элементу, который поддерживает  background-image  CSS.
 Мы также сначала указываем цвет фона, чтобы почтовые клиенты, не поддерживающие градиенты фонового изображения CSS, могли отображать запасной вариант:
    
 Outlook VML 
 Outlook для Windows не поддерживает градиенты CSS, но мы можем использовать  VML .
 Его нужно добавить сразу после элемента с классом градиента CSS:
  

  

    

      
      [здесь ваш наложенный HTML]
      
    
  
  
 Как видите, вам нужно установить фиксированную ширину для элемента    — это рекомендуется вместо использования  mso-width-percent: 1000; , так как он довольно глючит (особенно в Outlook 2013).
 Ширина элемента    должна соответствовать ширине его родительского элемента (в нашем случае  ).
 Основной градиент 
 Мы также можем добавить градиент к тексту электронного письма — включая поддержку Outlook.
 Для этого мы:
 создаем 
 , который обертывает наш шаблон: он будет использоваться в качестве запасного цвета сплошного фона.
 поместим код VML непосредственно внутри этого div, в основном обертывая весь наш шаблон.
Обратите внимание, как мы используем  МСО-ширины-процент: 1000;  вместо фиксированной ширины на   
 Вот пример:
  

  
  <таблица>
    
      
        
      
    
  
  
  
 Оба примера можно увидеть в репозитории проекта ↗
 Избегайте встраивания 
 Большинство почтовых клиентов, поддерживающих градиенты CSS, также поддерживают запросы  @media .
 Мы можем зарегистрировать точку останова  screen , чтобы Juice не встраивал наш градиент:
 
module.exports = {
  тема: {
    screen: {
      экран: {raw: 'screen'},
      sm: {max: '600px'},
    }
  }
}  
 Затем мы можем написать служебный класс следующим образом:
    
 Ресурсы 
 «Жесткие градиенты CSS» можно сократить, чтобы не включать избыточные значения 
 Этот пост является частью моей серии «Сегодня я узнал», в которой я делюсь всеми своими знаниями о веб-разработке.
 Сегодня я читал «Пока ты не смотрел», «Градиенты CSS стали лучше», автор — Ана Тюдор. Статьи Аны всегда полны знаний о CSS, и я не могу порекомендовать достаточно, чтобы следить за ней и ее написанием.
 В этой статье есть изящный небольшой трюк с градиентом CSS, о котором я не знал. Допустим, у вас есть линейный градиент  , который включает в себя «жесткие остановки цвета». Тогда ваш CSS будет выглядеть так:
  .element {
  
  фон: линейный градиент (
    # fc6262 20%,
    # 50bbf6 20% 40%,
    #aaffef 40% 60%,
    # f9e699 60% 80%,
    # 2c3749 80%
  );
}
  
 Это нормально работает, но имеет один недостаток.Чтобы определить жесткую границу между двумя цветами, вы должны определить одинаковое начальное и конечное значение. Это приводит к дублированию значений и ухудшает удобочитаемость и обслуживание.
 Детали градиента, которые привлекли мое внимание, могут помочь избежать этого дублирования. Если вы перейдете к спецификации изображений CSS, вы найдете раздел исправления цвета.
 Если цветовая остановка или подсказка перехода имеет позицию, меньшую, чем указанная позиция любой цветовой остановки или подсказки перехода перед ней в списке, установите ее положение равным наибольшей указанной позиции любой цветовой остановки или перехода. намек перед этим.
 Приведенное выше правило исправления определяет, что если начальное значение цвета меньше предыдущего значения остановки, то значение остановки будет использоваться как начало.
No related posts.