Напишите нам
info@market-studio.ru
СОЗДАЕМ И РЕКЛАМИРУЕМ
ВЕБ-САЙТЫ
|
MARKET STUDIO
сайты & маркетинг
Всем привет! Сегодня хочу поговорить немного о градиентах, популярных сайтах, предоставляющих пользователям возможность выбирать и/или генерировать их, а так же, о нескольких градиентах, которые я люблю и применяю в различных проектах. Возможно, кому-то из вас они тоже понравятся.
Несколько слов о градиентах
Сегодня мало кто не знает, что такое градиенты и как их применять в разработке. Если верить статьям, то в 2018 году, применение ярких и насыщенных градиентов — это некий тренд.

Что такое градиент?

Давайте, для галочки, вспомним, что такое градиент. Градие́нт (от лат. 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%.

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

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

mix-blend-mode

-webkit-text-fill-color в сочетании с -webkit-background-clip

Примеры:

mix-blend-mode
background-clip

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

Главное помните, что некоторые свойства поддерживаются не всеми версиями браузеров. Проверить совместимость можно на сайте Can I use

Сайты-генераторы градиентов

Ниже я приведу подборку сайтов, позволяющих генерировать те самые градиенты, делать из них canvas, png и svg форматы и копировать код для установки в ваши проекты.

CSS Gradient

My Color Space

UI Gradients

Cool Backgrounds

Всем удачи и приятного творчества.
Left
Right
Наши контакты
8 800 551 51 77
info@market-studio.ru
Рязанский просп., 101, стр. 5, Москва
8 (800) 551 51 77
8 (910) 083 76 83
Напишите нам
info@market-studio.ru
СОЗДАЕМ И РЕКЛАМИРУЕМ
ВЕБ-САЙТЫ
ОГРН 316502700079855
ИНН 504003523698