Всем привет! Сегодня хочу поговорить немного о градиентах, популярных сайтах, предоставляющих пользователям возможность выбирать и/или генерировать их, а так же, о нескольких градиентах, которые я люблю и применяю в различных проектах. Возможно, кому-то из вас они тоже понравятся.
- Что такое градиент?
- Форма записи градиентов в css
- Написание цвета градиентов
- Градиенты с изображениями
- Градиент для текста
- Сайты-генераторы градиентов
Сегодня мало кто не знает, что такое градиент, но для галочки, давайте вспомним.
Что такое градиент?
Градие́нт (от лат. gradiens, род. падеж gradientis — шагающий, растущий) — вектор, своим направлением указывающий направление наибольшего возрастания некоторой величины {\displaystyle \varphi } \varphi , значение которой меняется от одной точки пространства
к другой (скалярного поля), а по величине (модулю) равный скорости роста этой величины в этом направлении
Градиенты применяются в различных сферах, но нас интересует сфера веб-разработки, где градиенты часто применяются в качестве основного фона сайтов и различных контейнеров, линий, цитат, блоков и даже текста.
Исходя из этого, давайте посмотрим на пример.
Способ записи градиентов в css
Градиент может быть записан двумя способами:
background: linear-gradient(36deg, #0dd3ff, #0389ff, #1c79c0);
background-image: linear-gradient(36deg, #0dd3ff, #0389ff, #1c79c0);
Какой способ записи использовать — решать вам.
Возвращаемся к примеру. В нем мы указали три значения свойств background
:
- 1. Каким будет градиент —
linear-gradient
— в данном случае он линейный. В дальнейшем в статье мы будем говорить именно о нем. - 2. Указали угол наклона градиентной линии, который показывает направление градиента. Указывать направление можно двумя способами:
[<угол> | to <позиция>]
, где угол измеряется в deg, то есть — градус, или вторым способом
— указанием позиции от и до. Например,to top
,to right
,to bottom left
и т.д. - Значение цвета
#******
, которым будет начинаться и заканчиваться градиент.
Написание цвета градиентов
Цвет градиента может быть записан любым доступным обозначением:
- Hex Color Code — #000000 или сокращением #000;
- RGB Color Code — rgb(0, 0, 0);
- Color Name — black;
- HSL Color Code — hsl(0, 0%, 0%);
Вы также можете указывать цвета в процентном соотношении, добавив после цвета %. Например, rgb(0, 0, 0) 0%, rgb(255,255,255) 100%.
Вот собственно и все базовые знания, необходимые для использования градиентов.
Градиенты с изображениями
Для записи комбинированного градиента, с картинкой в качестве фона, можно использовать и другие свойства background.
Давайте посмотрим на пример.
В нем мы создали градиентный фон (код 1) и добавили изображение, с наложенным на него градиентом (код 2).
Градиент для текста
Иногда хочется сделать текст ссылки или заголовка более ярким, заметным и/или заменить обычный текст на какую-нибудь картинку. CSS позволяет нам это сделать, используя следующие свойства:
- mix-blend-mode
- -webkit-text-fill-color в сочетании с -webkit-background-clip
Примеры:
Главное помните, что некоторые свойства поддерживаются не всеми версиями браузеров. Проверить совместимость можно на сайте Can I use
Объединение градиентов CSS в режиме Background Blend Mode
Совсем недавно появились еще три новых свойства CSS, которые получили довольно хорошую поддержку в современных браузерах. Эти свойства включают:
- background-blend-mode, для смешивания фоновых изображений, градиентов и цветов фона
- mix-blend-mode, для смешивания элементов над другими элементами и, наконец,
- isolation, менее используемое свойство, применяется в режиме mix-blend, для смешивания элементов.
Давайте немного поговорим о первом. Такие функции, как 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; }
В итоге вот что у нас получилось,
Фон сайта с кружочками
Как насчет еще одного, на этот раз с радиальным градиентом:
.circles-background { background: radial-gradient( khaki 40px, transparent 0, transparent 100% ), radial-gradient( skyblue 40px, transparent 0, transparent 100% ), radial-gradient( pink 40px, transparent 0, transparent 100% ), snow; background-blend-mode: multiply; background-size: 100px 100px; background-position: 0 0, 33px 33px, -33px -33px; }
Результат превосходит все ожидания,
Эффект ночного видения
Давайте теперь попробуем воссоздать еще один эффект с режимами смешивания 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; }
И вот результат:
Градиент для border через border-image
Давайте создадим пустой div и сделаем ему градиентную рамку.
div { border: 1rem solid #2575fc; width: 200px; height: 200px; }
Как вы видите, у блока появилась цветная рамка, однако, цвет у нее один. Давайте добавим градиент.
border-image: linear-gradient(to right, #6a11cb 0, #2575fc 100%) 1;
В итоге наш блок будет выглядеть вот так:
Safari, Chrome до версии 15.0, Android и iOS поддерживают свойство -webkit-border-image.
Opera до версии 15.0 поддерживает свойство -o-border-image.
Сайты-генераторы градиентов
Здесь небольшая подборка сайтов, позволяющих генерировать градиенты, делать из них canvas, png и svg форматы и копировать для установки в проекты.
И напоследок, хочу поделиться с вами своей подборкой градиентов, которые мне очень нравятся и которые я применяю в различных проектах и при разработке сайтов.
Всем удачи и приятного творчества. Пишите в комментариях свои любимые градиенты.