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

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


image

Сегодня мало кто не знает, что такое градиенты и как их применять в разработке. Если верить статьям, то в 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%.


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


Градиенты с изображениями


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


Пример #1
Пример #2


В первом примере мы создали градиентный фон (пример 1), а во втором добавили изображение и наложили на него наш градиент (пример 2).


Градиент для текста


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



Примеры:

mix-blend-mode
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;
}

image
И вот у нас уже получился разноцветный фон. Создание подобного эффекта ранее было возможно только с изображением, вес которого составлял бы десятки килобайт. Но мы только что воспроизвели этот эффект через 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;
}

В итоге вот что у нас получилось,
image

Фон сайта с кружочками


Как насчет еще одного, на этот раз с радиальным градиентом:
.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;
}

Результат превосходит все ожидания,
image

Эффект ночного видения


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

Возьмем обычное изображение
image
и наложим на него радиальный градиент и градиент, который мы использовали при создании пледа — 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 форматы и копировать код для установки в ваши проекты.



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


Всем удачи и приятного творчества. Пишите в комментариях свои любимые градиенты.

Поделиться публикацией

Комментарии 9

    0
    «Вы также можете указывать цвета в процентном соотношении, добавив после цвета %. Например, rgb(0, 0, 0) 0%, rgb(255,255,255) 100%.»
    — Насколько я помню там не совсем так, значение процента указывает не процентное соотношение, а с какой позиции начинает действовать этот цвет, то есть в вашем примере элемент будет практически весь чёрный и только в конце переходить в белый.
    Кроме того, там можно указывать не только проценты, а и например пиксели и тд.
      0
      Помните правильно, а результат описываете не правильно. На 0% будет черный, а на 100% — белый. Между ними полутона. Чтобы было как вы говорите нужно что-то типа того rgb(0, 0, 0) 0%, rgb(0, 0, 0) 99%, rgb(255,255,255) 100%.
      +2
      Рассказывать о градиентах и не упомянуть css patterns очень странно.
        0
        Да, забыл о них. Добавил ссылку на сайт и дополнил статью.
        +3
        Сolorzilla.com/gradient-editor/ так же неплох.
          0
          Спасибо, добавил ссылку на сайт
          +1
          Градиент может быть записан двумя способами:

          background: linear-gradient(36deg, #0dd3ff, #0389ff, #1c79c0);
          background-image: linear-gradient(36deg, #0dd3ff, #0389ff, #1c79c0);


          Это не два способа записи градиента, а два способа записи, точнее, назначения, фона. А градиент и там, и там задан один и тот же: линейный.
            0
            ага, прямо «тётя Ася открыла для себя отбеливатель» — все бросаются всё малевать в градиентах, и только потом становится ясно, что это малярство. Умение делать градиент — пустяк, а вот применять его только в уместных случаях…
              0
              Запардоньте, но к какому типу относится данный пост?

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