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

May 02 2023

Фильтры — удобный инструмент в арсенале веб-дизайнера. Они позволяют изменять элементы на странице всего несколькими строками кода.

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

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

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;

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

А вот это изображение с голубым режимом наложения сверху.

background-color: cyan;
mix-blend-mode: overlay;

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

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

background-color: linear-gradient(cyan -20%, pink 40%, beige 140%);
mix-blend-mode: hard-light;

Наконец, мы рассмотрим создание некоторых текстур с использованием 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, чтобы получить эту картину шума.

<feTurbulence baseFrequency="0.05" />

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

<feTurbulence baseFrequency="0.01, .4" />

<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>

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