Hacer filtros para tu sitio web

Los filtros son una herramienta útil en el arsenal de un diseñador web. Le permiten modificar elementos en una página con solo unas pocas líneas de código. Estas modificaciones se pueden utilizar para crear rápidamente un diseño cohesivo en sus sitios web. Echaremos un breve vistazo a los degradados, los modos de fusión y las texturas SVG.

Es probable que ya esté familiarizado con los degradados, pero solo para darles una definición adecuada, los degradados son un desvanecimiento gradual entre dos o más colores. El más común es un gradiente lineal.

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;

A continuación tenemos los modos de fusión, que son una forma de combinar imágenes. Hay un montón de matemáticas geniales que hacen que funcionen, pero la esencia es que combinan los colores y los valores de dos imágenes de diferentes maneras para obtener una variedad de resultados. Aquí hay una imagen que manipularemos:

Ahora aquí está esa imagen con un modo de fusión de superposición cian en la parte superior.

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;

Finalmente, veremos cómo crear algunas texturas usando SVG. SVG significa gráfico vectorial escalable. SVG es una etiqueta HTML y ajustará su configuración dentro de sus propiedades dom. Hay muchas propiedades SVG con las que puede jugar, pero solo veremos la turbulencia. Si quieres saber más sobre las otras propiedades, te recomiendo consultar esta guía .

El filtro de turbulencia crea ruido Perlin y se puede utilizar para crear efectos como marmoleado, ruido blanco, fuego, humo, agua y movimiento. Una turbulencia más baja le da al efecto un patrón más grande y una turbulencia más alta hace que el patrón sea más pequeño hasta que parezca un ruido blanco.

Aquí hay una imagen con la turbulencia establecida en 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>

Tiene un efecto submarino que se puede combinar con más turbulencia para afinar. Alternativamente, podría usar una frecuencia base de turbulencia de 0.4 para obtener este patrón de ruido.

<feTurbulence baseFrequency="0.05" />

La turbulencia en realidad tiene dos entradas de frecuencia base, una para el plano x y otra para el plano y. Si pones un valor se mantienen uniformes, pero con dos valores, podemos crear mapas de frecuencia como este:

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

Esperamos que este rápido vistazo a cada una de estas propiedades le haya dado algunas ideas sobre las posibilidades de diseñar rápidamente sus sitios web. Estos filtros son simples y súper fáciles de implementar, pero tienen un gran impacto en el efecto visual de su sitio web.

Fuentes:

desarrollador.mozilla.org

https:///@lavanyaratnabala/css-patterns-870d65192f40

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