Создание фильтров для вашего сайта

Фильтры - удобный инструмент в арсенале веб-дизайнера. Они позволяют изменять элементы на странице с помощью всего нескольких строк кода. Эти изменения можно использовать для быстрого создания целостного дизайна ваших сайтов. Мы вкратце рассмотрим градиенты, режимы наложения и текстурирование SVG.

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

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

background: linear-gradient(cyan -20%, pink 40%, beige 140%)

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

radial-gradient(cyan 50% , red 50%, orange );

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

repeating-linear-gradient(120deg, black, black 10px, white 10px, white 20px);

background-image: radial-gradient(black 15%, transparent 15%),
    radial-gradient(black 80%, transparent 40%);
  background-size:60px 60px;
  background-position: 0 0, 30px 30px;

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

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

Теперь вот это изображение с циановым режимом наложения.

Вот один из них с режимом наложения "Зеленая разница".

background-color: green;
mix-blend-mode: difference;

А вот один с режимом наложения цвета загара.

background-color: tan;
mix-blend-mode: color;

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

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

Наконец, мы рассмотрим создание некоторых текстур с помощью SVG. SVG означает масштабируемая векторная графика. SVG - это HTML-тег, и вы будете настраивать его параметры в свойствах dom. Существует множество свойств, которыми вы можете манипулировать с SVG, но мы будем рассматривать только турбулентность. Если вы хотите узнать больше о других свойствах, я рекомендую посмотреть это руководство .

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

Вот изображение с турбулентностью, установленной на 0,05.

    <svg>
      <filter id='noise' x='0%' y='0%' width='100%' height='100%'>
        <feTurbulence baseFrequency="0.05" />
      </filter>
      <rect x="0" y="0" width="100%" height="100%" filter="url(#noise)" fill="none">
    </svg>

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

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

Для получения эффекта зернистости можно применить наложение.

Турбулентность фактически имеет два входа базовой частоты, один для плоскости x и один для плоскости y. Если вы вводите одно значение, они остаются однородными, но при двух значениях мы можем создавать карты частот, подобные этой:

Затем мы можем использовать SVG-фильтр "Карта смещения" для смещения цветов в соответствии с приведенной выше картой частот.

<svg>     
 <filter id="noise" x="0%" y="0%" width="100%" height="100%">
    <feTurbulence baseFrequency="0.01 0.9" result="NOISE" numOctaves="2" />
    <feDisplacementMap in="SourceGraphic" in2="NOISE" scale="20" xChannelSelector="R" yChannelSelector="R"></feDisplacementMap>
 </filter>
    <image xlink:href="..." x="0" y="0" width="100%" height="100%" filter="url(#noise)"></image>
</svg>

Вот этот эффект на изображении с базовой частотой 0,05.

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

Источники:

Developer.mozilla.org

https://tympanus.net/codrops/2019/01/15/svg-filters-101/