93 163 53 53
info@espai.es

Síguenos en las redes

Cómo utilizar los CSS Filters

filters
Diseño Web

Cómo utilizar los CSS Filters

por
Compartir:

¿PARA QUE SIRVEN LOS CSS FILTERS?

 

Los CSS Filters o cambio de filtros, sirven para poder cambiar la tipología/color de la imagen aplicando diversos colores para las imágenes o videos además de aplicar diferentes tonalidades de colores. Vamos a explicar cómo utilizarlos.

En este artículo voy a mostrar el código y la estructura del documento tanto de <html> cómo <css>, en los que les he aplicado diferentes filtros.

Código HTML y ESTRUCTURACIÓN

<div class="cont">
       <img src="assets/IMG/gato_persa_miniatura.jpg" alt="">
           <p>SIN FILTRO</p>
</div>

<div class="cont">
       <img id="grayscale" src="assets/IMG/gato_persa_miniatura.jpg" alt="">
           <P>ESCALA DE GRISES</P>
</div>

<div class="cont">
       <img id="invert" src="assets/IMG/gato_persa_miniatura.jpg" alt="">
           <P>INVERTIR</P>
</div>

<div class="cont">
       <img id="brightness" src="assets/IMG/gato_persa_miniatura.jpg" alt="">
           <P>BRILLO</P>
</div>

<div class="cont">
       <img id="saturation" src="assets/IMG/gato_persa_miniatura.jpg" alt="">
           <P>SATURACION</P>
</div>

<div class="cont">
       <img id="sepia" src="assets/IMG/gato_persa_miniatura.jpg" alt="">
           <P>SEPIA</P>
</div>

<div class="cont">
       <img id="blur" src="assets/IMG/gato_persa_miniatura.jpg" alt="">
           <P>DIFUMINAR</P>
</div>

<div class="cont">
       <img id="opacity" src="assets/IMG/gato_persa_miniatura.jpg" alt="">
           <P>OPACIDAD</P>
</div>

<div class="cont">
       <img id="blur-hue" src="assets/IMG/gato_persa_miniatura.jpg" alt="">
           <P>DESENFOQUE + SATURACION</P>
</div>

<div class="cont">
       <img id="blur-text" src="assets/IMG/gato_persa_miniatura.jpg" alt="">       
           <P>DESENFOQUE</P>
</div>

 

Definición de Código

Como se puede observar en el código, he utilizado una misma imagen en el cual la repito 10 veces y le aplico diferentes filtros de cambios, excepto una que es la original sin aplicar ningún filtro.

Todas las imágenes las he introducido dentro de un <div>, de los cuales todos contendrán la misma <class='cont'>. Para abreviar la palabra contenido, lo que hago es ponerle el 'cont', así luego es más fácil de acordarse a la hora de escribir código en css, y al tener todas las fotos en el mismo <div> luego te ahorras escribir más código.

De las 10 imágenes que hay en el documento, nueve irán con una <id=""> dentro de la imagen en el cual le pongo el nombre de lo que va a hacer esa <id>,para que luego cuando me toque incluirlo, use esa misma para darle los valores a los filtros.

 

Código CSS

/*contenedor*/
.cont{display: inline-block;padding: 20px 10px;}
.container:hover > .hidden {visibility: visible;pointer-events: none;}

/*---------------LA IMAGEN SIN FILTRO --> NO VA A TENER ELEMENTOS EXTRAS DE FILTROS ----------------*/
/*escala de grises*/
#grayscale:hover {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
 }

/*INVERTIR*/
#invert:hover {
    -webkit-filter: invert(.9);
    filter: invert(.9);
 }
/*BRILLO*/
#brightness:hover {
    -webkit-filter: brightness(.5);
    filter: brightness(.5);
 }

/*SATURACION*/
#saturation:hover {
    -webkit-filter: saturate(6);
    filter: saturate(6);
 }

/*SEPIA*/
#saturation:hover {
    -webkit-filter: saturate(6);
    filter: saturate(6);
 }
/*DIFUMINAR*/
#blur:hover {
    -webkit-filter: blur(5px);
    filter: blur(5px);
 }

/*OPACIDAD*/
#opacity:hover {
    -webkit-filter: opacity(.5);
    filter: opacity(.5);
 }

/*DESENFOQUE + SATURACION*/
#blur-hue:hover {
    -webkit-filter: blur(5px) saturate(6);
    filter: blur(5px) saturate(6);  
 }

/*DESENFOQUE SIMPLE*/
#blur-text:hover {
    -webkit-filter: blur(5px);
     filter: blur(5px);
  }

Definición código CSS

Cómo se puede observar, en el código lo que hago es remarcar con un  /*comentario*/ lo que voy a incluir dentro de ese contenido, así es más fácil localizar el código que buscas. Además por si tienes que hacer un cambio de código o (añadir/eliminar) más contenido, sea más fácil de localizar para aplicar los cambios.

Podemos aplicar filters a cualquier imagen a partir de este código

 

    img {-webkit-filter: filter(valor);}

 

FILTERS USADOS

Muestro como se deben llamar los diferentes filtros en el CSS.

  • Escala de Grises –> 'grayscale'.
  • Invertir Colores –> 'invert'.
  • Cambio de Brillos –> 'brightness'.
  • Cambio de Saturación –> 'saturation'.
  • Tono Sepia –> 'sepia'.
  • Difuminar –>'blur'.
  • Opacidad –> 'opacity'.
  • Desenfoque + Saturación –>'blur-hue'.
  • Desenfoque –> 'blur'.

 

Otros Filters

Filtros que se pueden incluir dentro del documento

  •  Cambio de Contraste –> 'contrast'.
  • Cambio de Tono –> 'hue-rotate'.

 

Todos los tipos de Filtros/»FILTERS», se pueden combinar entre sí, siempre y cuando se definan con sus atributos y elementos correctos.

Resultado Final

Así se verán todas las imágenes aplicando los filtros que les hemos dado. Para que se visualicen todas las fotos aplicando los filtros deberás, pasar el ratón por encima de cada imagen y verás el resultado que se le aplica a cada imagen.

Estos Filters, se pueden aplicar para mejora el diseño de tu página web, y darles un estilo diferente a los que ya se tiene.

Para poder ver todo el código completo debes ir al siguiente enlace; Albert on CodePen

 

Compartir:
0

Escribe un comentario