Как сделать градиент background
Несколько слов о градиентах
Всем привет! Сегодня хочу поговорить немного о градиентах, популярных сайтах, предоставляющих пользователям возможность выбирать и/или генерировать их, а так же, о нескольких градиентах, которые я люблю и применяю в различных проектах. Возможно, кому-то из вас они тоже понравятся.
Сегодня мало кто не знает, что такое градиенты и как их применять в разработке. Если верить статьям, то в 2018 году, применение ярких и насыщенных градиентов — это некий тренд.
Что такое градиент?
Давайте, для галочки, вспомним, что такое градиент.
Градие́нт (от лат. gradiens, род. падеж gradientis — шагающий, растущий) — вектор, своим направлением указывающий направление наибольшего возрастания некоторой величины <\displaystyle \varphi >\varphi, значение которой меняется от одной точки пространства к другой (скалярного поля), а по величине (модулю) равный скорости роста этой величины в этом направлении
Градиенты применяются в различных сферах, но нас интересует сфера веб-разработки, где градиенты часто применяются в качестве основного фона сайтов и различных контейнеров, линий, цитат, блоков и даже текста.
Форма записи градиентов в css
Давайте коротко рассмотрим, из чего же состоит классический градиент.
Градиент может быть записан двумя способами:
background: linear-gradient(36deg, #0dd3ff, #0389ff, #1c79c0);
background-image: linear-gradient(36deg, #0dd3ff, #0389ff, #1c79c0);
Какую форму записи использовать — решать вам.
В коде, приведенном выше, мы указали три значения свойств background:
Все значения разделяются запятыми, а количество цветов может быть абсолютно любым, от двух до бесконечности. Но, разумеется, в пределах разумного.
Написание цвета градиентов
Цвет градиента может быть записан любым доступным обозначением:
Вы также можете указывать цвета в процентном соотношении, добавив после цвета %. Например, rgb(0, 0, 0) 0%, rgb(255,255,255) 100%.
Вот собственно и все базовые знания, необходимые для применения градиентов в веб-разработке. Но наверняка не все знают, что градиенты можно использовать и в других случая. Ниже о них.
Градиенты с изображениями
Для записи комбинированного градиента, с картинкой в качестве фона, можно использовать и другие свойства background. Давайте рассмотрим на двух примерах:
В первом примере мы создали градиентный фон (пример 1), а во втором добавили изображение и наложили на него наш градиент (пример 2).
Градиент для текста
Иногда хочется сделать текст ссылки или заголовка более ярким, заметным и/или заменить обычный текст на какую-нибудь картинку. CSS позволяет нам это сделать, используя следующие свойства:
Аналогичные действия можно совершать, заменив градиент на ссылку с изображением.
Главное помните, что некоторые свойства поддерживаются не всеми версиями браузеров. Проверить совместимость можно на сайте Can I use
Объединение градиентов CSS в режиме Background Blend Mode
Такие функции, как linear-gradient(), radial-gradient(), и repeating-linear-gradient(), repeating-radial-gradient() и другие разновидности имеют широкую поддержку и более стандартизированный синтаксис во всех современных браузерах. Однако, свойство background также может включать в себя более одного градиента, причем каждая функция разделяется запятой. Lea Verou продемонстрировала впечатляющие модели — паттерны, которые могут быть созданы с помощью этой техники: от шахматных досок, до кирпичей, до звезд. Но теперь, когда у нас есть свойство background-blend-mode, мы можем создать новые градиенты и шаблоны. Примеры ниже.
Спектральный фон
Наложим три градиента, чтобы создать фон с почти полным спектром цветов, который можно отобразить на мониторе.
.spectrum-background <
background:
linear-gradient(red, transparent),
linear-gradient(to top left, lime, transparent),
linear-gradient(to top right, blue, transparent);
background-blend-mode: screen;
>
И вот у нас уже получился разноцветный фон. Создание подобного эффекта ранее было возможно только с изображением, вес которого составлял бы десятки килобайт. Но мы только что воспроизвели этот эффект через CSS менее чем на 200 байт, не говоря уже о сохранении HTTP-запроса.
Создаем плед на css
Мы также можем создать интересные шаблоны с градиентами при помощи background-blend-mode.
.plaid-background <
background:
repeating-linear-gradient(
-45deg,
transparent 0,
transparent 25%,
dodgerblue 0,
dodgerblue 50%
),
repeating-linear-gradient(
45deg,
transparent 0,
transparent 25%,
tomato 0,
tomato 50%
),
repeating-linear-gradient(
transparent 0,
transparent 25%,
gold 0,
gold 50%
), white;
background-blend-mode: multiply;
background-size: 100px 100px;
>
В итоге вот что у нас получилось, 
Фон сайта с кружочками
Эффект ночного видения
Давайте теперь попробуем воссоздать еще один эффект с режимами смешивания CSS и сделать фотографию, как будто мы просматриваем ее через объектив очков ночного видения.
Возьмем обычное изображение 
и наложим на него радиальный градиент и градиент, который мы использовали при создании пледа — repeating-linear-gradient
.night-vision-effect <
background:
url(https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg),
radial-gradient(
rgba(0,255,0,.8),
black
),
repeating-linear-gradient(
transparent 0,
rgba(0,0,0,.2) 3px,
transparent 6px
);
background-blend-mode: overlay;
background-size: cover;
>
И вот результат.
Сайты-генераторы градиентов
Ниже я приведу подборку сайтов, позволяющих генерировать те самые градиенты, делать из них canvas, png и svg форматы и копировать код для установки в ваши проекты.
И напоследок, хочу поделиться с вами своей подборкой градиентов, которые мне очень нравятся и которые я применяю в различных проектах и при разработке сайтов.
Всем удачи и приятного творчества. Пишите в комментариях свои любимые градиенты.
Линейные градиенты
CSS-градиенты позволяют сделать фон из двух и более цветов, плавно переходящих из одного в другой. Они с нами уже достаточно давно, и имеют довольно неплохую поддержку браузерами. Большинство современных браузеров понимает их без префиксов, для IE9 и старше есть Gradient Filter, также для IE9 можно использовать SVG.
linear-gradient
Линейные градиенты достаточно просты в использовании. Для самого элементарного градиента достаточно задать начальный и конечный цвета:
Цветов может быть любое количество больше двух. Также можно управлять направлением градиента и границами (точками остановки) цветов.
Угол или направление градиента
Направление можно задавать градусами или ключевыми словами.
to bottom = 180deg — значение по умолчанию;
Ниже можно увидеть как работают разные направления в растяжке от сиреневого до желтого:
Вот код самого первого квадрата, для примера:
Разница хорошо видна на прямоугольных фигурах:
Управление положением цветов
Значения точек остановки для цветов градиента задаются в единицах или в процентах и могут быть больше 100% и меньше 0%.
Чем ближе находятся точки остановки соседних цветов, тем четче будет граница между ними. Таким образом можно легко делать полосатые фоны:
Так можно сделать, например, фон под боковую колонку, растянутый на всю высоту родительского элемента:
Полоски на фоне сайдбара — ещё один градиент, состоящий из чередования полной прозрачности и белого цвета с прозрачностью 30%. Градиенты с полупрозрачными цветами удобны тем, что их можно наложить поверх фона любого цвета.
Градиент в примере задан сложным длинным кодом, потому что полоски должны располагаться только над фоном для сайдбара. Если не пытаться сделать всё фоном для одного блока, можно было бы решить задачу с помощью псевдоэлемента.
При отсутствии ограничений код может быть гораздо короче:
В первой строчке задаем фоновый цвет элемента, тип и направление (цвет и направление можно опустить), во второй — определяем цвета градиента и границу между ними, в третьей — задаем положение и размер получившегося изображения. Самая важная часть — размер. По умолчанию фон повторяется, поэтому получившийся паттерн заполнит собой фон элемента. Очень легко и понятно : )
Вся запись может быть сделана в одну строчку, но для читабельности удобнее писать в несколько, особенно для сложных градиентов.
Также важно знать, что ключевое слово transparent означает прозрачный черный, а не прозрачный белый, поэтому при его использовании в Firefox можно получить вот такую неприятность:
Действующий пример (смотреть в Firefox): jsbin.com/OvOwEma/2/edit.
Чтобы узнать rgb-нотацию конкретного цвета, можно воспользоваться leaverou.github.io/css-colors, инструментом от Lea Verou.
repeating-linear-gradient
Помимо обычного linear-gradient можно сделать repeating-linear-gradient — повторяющийся градиент
Upd. от 3.07.20: в данный момент повторяющиеся градиенты корректно отрисоваются в большинстве браузеров, и ими можно свободно пользоваться.
Ограничения
Градиенты имеют такое же ограничение, что и box-shadow : им нельзя задавать отдельно цвета или направление. Это приводит к дублированию кода и острой потребности воспользоваться препроцессорами в случае создания сложных градиентов.
Другое ограничение состоит в том, что градиенты не анимируются, что, впрочем, можно до какой-то степени обойти.
Для быстрого создания кроссбраузерных градиентов есть очень удобный инструмент: colorzilla.com/gradient-editor/. Помимо кода для современных браузеров, он предложит код для старых IE и SVG для 9-го.
В сочетании с базовыми возможностями управления фоновыми картинками градиенты дают широчайшие возможности для создания фонов разной степени сложности совершенно без использования изображений. Градиентами можно делать сложные и интересные паттерны, но это уже совсем другая тема.
Радиальный градиент
Радиальные по своему принципу похожи на линейные градиенты, но один цвет переходит в другой не вдоль прямой линии, а словно круги по воде вокруг точки. На рис. 1 представлено для сравнения одновременно два разных градиента: радиальный (рис. 1а) и линейный (рис. 1б).
 |  |
| а | б |
Рис. 1. Радиальный и линейный градиент
HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx
Рис. 2. Радиальный градиент
Начальную точку градиента можно задавать в любом месте элемента, для этого вначале указывается её позиция.
Позиция точки пишется аналогично значениям свойства background-position с помощью ключевых слов или доступных единиц измерения вроде пикселов или процентов; ниже приведены возможные сочетания.
Если задать позицию начальной точки для примера 1 как at 40px 45px, а второй цвет сделать несколько темнее (#0076a5), то получится чуть более реалистичный шарик (рис. 3).
Рис. 3. Изменение начальной точки градиента
Возможны две формы радиального градиента — круг (circle) и эллипс (ellipse), которые различаются своим видом. По умолчанию устанавливается эллиптический градиент.
Разница между круговым и эллиптическим градиентом для цветов #f9e497 и #ffb60f продемонстрирована на рис. 4.
а. круговой градиент (значение circle)
б. эллиптический градиент (значение ellipse)
Рис. 4. Разные виды градиента
Для элемента, у которого ширина равна высоте, как в примере с шариком, разница между типами градиента будет незаметна.
В примере 2 показано создание кругового градиента с заданной начальной точкой. Для усиления контрастности между цветами используется три значения цвета, а не два.
Пример 2. Круговой градиент
HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx
Рис. 5. Круговой градиент
Наряду с типом градиента можно задавать и его размер, который зависит от применяемых ключевых слов. Размер пишется через пробел после типа градиента (circle или ellipse).
В табл. 1 перечислены возможные значения размера с их описанием и результатом для белого и чёрного цвета. Код и вид дан для кругового и эллиптического градиента.
| Значение | Код | Описание | Вид |
|---|---|---|---|
| closest-side | Форма градиента совпадает с ближайшей к нему стороной блока. |  | |
| closest-corner | Форма градиента вычисляется на основании информации о расстоянии до ближайшего угла блока. |  | |
| farthest-side | Градиент распространяется до дальней стороны блока. |  | |
| farthest-corner | Форма градиента вычисляется на основании информации о расстоянии до дальнего угла блока, |  |
Для центральной начальной точки градиенты вроде closest-corner и farthest-side совпадают. Но градиенты будут различаться, если установить начальную точку в углу. В примере 3 используется значение closest-corner с заданием начальной точки в пикселах.
Пример 3. Размер градиента
HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx
Результат данного примера показан на рис. 6.
Рис. 6. Использование значения closest-corner
Подобно линейному градиенту можно указывать несколько цветов, устанавливать их позицию и делать резкие переходы между цветами. Для этого произвольное количество цветов перечисляется через запятую, а после значения цвета через пробел идёт его позиция, которая может быть задана в пикселах или процентах. Крайние значения 0% и 100% можно не писать, они подразумеваются автоматически.
Резкие переходы получаются, когда позиция одного цвета совпадает с позицией другого, как показано в примере 4. Разница в один пиксел сделана, чтобы немного сгладить переход, иначе получается «лесенка» из пикселов, что смотрится не очень красиво.
Пример 4. Резкие переходы
HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx
Результат данного примера показан на рис. 7.
Рис. 7. Резкие переходы между разными цветами
Рисование изображений с помощью CSS-градиентов
Дата публикации: 2018-08-09
От автора: под «изображениями CSS» я имею в виду изображения, созданные с использованием только HTML-элементов и CSS. Они выглядят так, как если бы они были SVG, нарисованные в Adobe Illustrator, но они были сделаны прямо в браузере. Некоторые из тех методов, которые я видел, используются возиться с пограничными радиусами, тенями блоков, а иногда и с clip-path. Вы можете найти множество замечательных примеров, если вы будете искать ежедневные изображения css на CodePen.
Я нарисовал некоторые из них, включая этот Infinity Gauntlet, но в одном элементе с только фоном и минимальным использованием других свойств. Давайте посмотрим, как вы можете сами создавать изображения, используя градиент CSS.
Метод
Понимание синтаксиса сокращенного background а также того, как работают градиенты CSS — это практически все, что вам нужно, чтобы нарисовать что-либо в одном элементе. В качестве обзора приведены следующие аргументы:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Они могут встречаться в любом порядке, за исключением того, что между position и size должно быть /. Мы должны сохранить эти два аргумента в этом порядке, иначе мы получим неожиданные результаты. Не все они должны быть включены, и для этой цели мы не будем использовать аргументы color, repeat, attachment, origin или clip. Это оставляет нам image, size и position. Однако, поскольку фоны повторяются по умолчанию, мы должны установить background-repeat: no-repeat; прямо под всем background (если некоторые фоны должны быть повторены, мы можем использовать repeating-linear-gradient() и repeating-radial-gradient()). В этом случае скелет CSS будет следующим:
Мы даже можем использовать несколько наборов фоновых аргументов! Поэтому мы можем складывать и разделять их запятыми следующим образом:
Структура, приведенная выше, является основой того, как мы будем рисовать изображения — по одной линии в каждой форме. Имейте в виду, что порядок визуализации является противоположным тому, как упорядочены элементы с абсолютной или фиксированной позицией. Первый появится сверху, а не внизу. Другими словами, круги (радиальные градиенты) ниже будут отображаться снизу вверх (синий снизу, красный сверху).
Рисование
Мы будем использовать Sass (SCSS) для рисования этих изображений, чтобы мы могли использовать переменные для цветовой палитры. Это сделает код короче, легче читается и изменяет затемненные или более легкие варианты цветов. Вместо этого мы могли бы использовать переменные в обычном CSS и забыть Sass, но из-за отсутствия поддержки Internet Explorer, давайте придерживаться Sass. Чтобы объяснить, как это работает, мы будем экспериментировать с фигурами, используя как линейные, так и радиальные градиенты.
Настройка цветовой палитры
Наша палитра будет состоять из цветов RGB или HSL. Я объясню позже, почему сохранить цвета в любом из этих форматов. В этом примере мы будем использовать RGB.
Настройка масштаба и холста
Мы будем использовать em единицы для размеров изображения, чтобы изображение можно было легко изменить пропорционально. Так как 1em равно размеру шрифта элемента, каждая единица изображения будет соответствующим образом скорректирована, если изменится. Давайте установим размер шрифта 10px и установим ширину и высоту 24em. Единицы 10px легче всего думать, потому что если вы мысленно выполните математику, вы сразу получите 240 × 240 пикселей. Затем, чтобы увидеть, где находятся края холста, мы будем использовать серию 1px grey.
Однако помните об использовании меньших размеров шрифта; у браузеров минимальная настройка размера шрифта (по причинам доступности). Если вы установите размер шрифта 4px, а минимальный — 6px, он будет принудительно установлен на 6px.
Рисование фигур
Здесь начинается интересная часть. Чтобы нарисовать квадрат размером 8 × 8 мкм в центре, мы используем linear-gradient() с двумя одноцветными остановками.
Установка обоих остановок с одним и тем же значением делает наклонную сторону такой же четкой, как и остальные. Если вы посмотрите на это более близко, но, похоже, сторона пикселирована:
Это будет проблемой с круглыми краями, а также при работе с радиальными градиентами, которые мы увидим позже. Если вы просматриваете это в браузере, отличном от Safari, все выглядит великолепно даже при переходе на непрозрачный цвет (скажем, оранжевый). Проблема перехода на transparent в Safari заключается в том, что вы заметите немного черной подкладки на наклонной стороне.
Если вам интересно, почему мы не использовали шестнадцатеричные цвета, Internet Explorer и Edge не поддерживают нотации #rgba и #rrggbbaa (ага, hex имеет альфа-канал с конца 2016 года, если вы никогда не знали), и мы хотим, чтобы это работало как кросс-браузер, насколько это возможно. Мы также хотим оставаться в соответствии с нашим выбором цветового формата.
Теперь давайте переместим форму вертикально на 20% и нарисуем оранжевый круг тех же размеров. Кроме того, добавьте еще одну переменную для своей прозрачной версии. Для гладкого края вставьте 1%-ный зазор между твердым и прозрачным апельсинами.
Чтобы поддерживать согласованность с нашим размером, вторая остановка цвета должна составлять 50% вместо 100%.
Позиционирующие фигуры
Способ расположения градиентов основан на том, фиксирован ли блок или процент. Предположим, мы переместим оба градиента на квадраты и попытаемся поместить их полностью через div горизонтально.
Красный квадрат заканчивается полностью на холсте (очерчен), а правая сторона оранжевого квадрата касается другой стороны. Использование фиксированных единиц — это как размещение абсолютно позиционированных элементов или рисования фигур в холсте HTML5. В этом смысле верно, что точка происхождения находится в левом верхнем углу. При использовании процентов и заданного размера фона, div получает «поддельное заполнение» половины размера фона. В то же время точка происхождения фона центрирована (не путать с background-origin, что касается углов блока).
Теперь, если мы превратили эти градиенты в радиальные градиенты в виде кругов и применили одни и те же позиции x 24 и 100%, оба оказались на другой стороне пополам. Это связано с тем, что точка происхождения всегда находится в центре, если мы пишем фон так:
Если мы перепишем фон, чтобы положение и размер были после градиента и использовались на 100% 100% at center, они будут расположены как линейные градиенты. Красная выходит наружу, а оранжевая — к правому краю. «Поддельное заполнение» происходит еще раз оранжевым цветом.
Нет единого правильного способа позиционирования фигур, но для размещения его как абсолютно или фиксированного позиционного элемента HTML используйте фиксированные единицы. Если вам нужен быстрый способ разместить фигуру (используя параметры position / size) в мертвой position / size оптимальным вариантом будет 50%, так как начало координат будет его центром. Используйте 100%, если он должен касаться самой правой стороны.
Калибровочные фигуры
Размер в CSS-фонах работает так, как мы ожидали, но на него все еще влияет тип устройства, используемого для фиксированных позиций или процентов. Если мы снова возьмем наши квадраты и изменим их ширину на 10em, красный будет расширяться вправо, а оранжевый будет расширяться в сторону.
Если мы использовали em единицы для y-позиции, форма будет расти вниз или сжиматься вверх после изменения высоты. Если мы будем использовать процент, то он будет расширяться как по вертикали. Некоторое время назад мы рассмотрели два способа рисования кругов с радиальными градиентами. Первый способ — указать ширину и высоту между ( и at и затем положением после этого:
Второй способ — использовать 100% 100% в центре, а затем дать положение и размер:
Эти методы рисуют круги, но приводят к различным результатам, потому что:
Первый способ занимает весь div, так как не было реального фонового положения или размера.
Придание реальному положению и размеру во втором задает его ограничивающий прямоугольник. Следовательно, он будет вести себя подобно форме линейного градиента.
Кроме того, цель 100% 100% вместо использования circle или ellipse — позволить кругу занимать всю ограничительную рамку. Это даже дает нам полный контроль над его размерами. Таким образом, он останется таким же, если вы измените 50% 50% позицию на что-то еще. Если используется одно из двух ключевых слов, край круга останавливается только около 71% пути при центрировании и становится более искаженным, если его положение отрегулировано. Например, вот что происходит, когда мы меняем положение x на 0 для circle и ellipse:
В конечном итоге вы можете пересмотреть синтаксис как radial-gradient(width height at xy) или radial-gradient(100% 100% at x-in-bounding-box y-in-bounding-box) xy / width height. Если вы рисуете только круг или овал, вы можете упростить код с первого взгляда. Если вы рисуете часть круга или часть кольца, тогда вступает в игру второй способ. В примерах, которые мы создадим дальше, будет много применений.
Примеры
Готовы сейчас нарисовать что-то реальное? Мы будем проходить три примера шаг за шагом. Первые два будут статическими — одно с большим количеством полукругов, а другое — с закругленными прямоугольниками. Последний пример будет меньше, но сфокусирован на анимации.
Статическое изображение
Этот зонтик будет нашим первым статическим изображением:
