Filtros CSS3

Gracias a CSS3, ahora es posible aplicar filtros a nuestros elementos HTML, hoy estamos aquí para aprender todos los filtros de CSS3, son realmente fantásticos, con muchas aplicaciones que te van a encantar. Ahora tenemos el poder de controlar el desenfoque, saturación, tonos, brillos y mucho más de elementos como imágenes.

Qué son y para qué sirven los filtros de CSS3

Los filtros en CSS3 son funcionalidades que nos permiten aplicar efectos visuales a un elemento, en nuestro caso específico a una imagen. Por ejemplo, mediante un código de CSS podemos aplicar una escala de grises a una imagen para que esta aparezca en blanco y negro, esta misma imagen podemos utilizar en otra parte de la página con un filtro de sepia, entonces la misma imagen aparecerá en colores marrón- rojizo.

Lo importante por ahora es que entiendas que los filtros son capaces de aplicar efectos visuales a una imagen y que esto se logra mediante un código de CSS3. Por ejemplo, ahora trabajaremos con una imagen de Pixabay, es la imagen de unos gatos de colores, durante esta lección aplicaremos los diversos filtros mediante CSS3 y verás como cambia el aspecto de dichas imágenes. A continuación presentamos la imagen original:

Cómo poner un filtro

Colocar un filtro es muy sencillo, simplemente apuntamos al elemento y definimos la propiedad filter, en este caso también estableceremos una función de filtro, existen varios, ya están establecidos y solo tenemos que aprenderlas, por ejemplo la función de filtro para escala de grises es: grayscale; este y muchos otros las conoceremos aquí mismo; finalmente indicaremos el valor del parámetro de dicha función de filtro entre paréntesis, de ahora en adelante solo le llamaremos valor.

Veamos un ejemplo genérico, para ver como sería la sintaxis:

Selector {  filter: funcion de fitro(valor); }

Ahora imaginemos que apuntamos a una imagen con id="gatito" y aplicaremos un filtro de escala de grises al 100%, es decir completamente en blanco y negro. La función para aplicar escala de grises es: grayscale.

#gatito {
  filter: grayscale(100%);
}

Importante: no olvides que el nombre de la función y su valor van juntos, sin espacio. Recuerda siempre que si pones espacio antes del paréntesis, la declaración no funcionará correctamente.

Ahora que tienes la idea general de lo que son los filtros y cómo se ponen, ahora pasemos a conocer detalladamente cada una de ellas. Empezaremos mencionando la propiedad filter, para que nunca se te olvide.

La propiedad filter de CSS3

Emplearemos la propiedad filter para aplicar filtros a las imágenes, es bastante usado para modificar el aspecto visual de imágenes, fondos y bordes de elementos HTML. La propiedad filter nos permite presentar una mima imagen con diversos filtros sin necesidad de cargar diferentes archivos de imágenes.

Muy importante: De ahora en adelante la imagen que utilizaremos en los ejemplos de demostración, es la de los gatitos mencionados anteriormente, verás como cambia el aspecto a medida que vayamos aplicando las diversas funciones de filtro de CSS3.

Funciones de filtro en CSS3

Ahora conoceremos y aprenderemos a aplicar las funciones de filtro disponibles para aplicar a nuestros elementos de imagen, empezamos por uno que ya mencionamos anteriormente en los ejemplos.

La función grayscale

La función grayscale de css3 nos permite aplicar un filtro de escala de grises a una imagen, es decir, ahora podemos convertir cualquier imagen de color a una de blanco y negro, o si gustas puedes aplicarle un poco, sin que llegue a convertirse en blanco y negro, eso dependerá del valor que pongamos a la escala.

Valor de la escala

El valor de la escala puede expresarse en porcentajes que van del 0% al 100%, donde 0% mantiene la imagen tal cual, mientras 100% hará que la imagen se vea completamente en blanco y negro. También es posible expresar el parámetro con valores numéricos que van del 0 al 1, 0 es lo mismo que 0% y 1 es lo mismo que 100%. Valores intermedios, también tienen equivalentes, por ejemplo 0.5 sería lo mismo que 50%.

Podemos usar un valor entre el 0% y 100% aplicará el filtro en la medida que decidamos. Veamos un ejemplo:

Ejemplo de grayscale CSS3

A continuación tenemos un ejemplo en el que la función grayscale toma un valor de 100%, es decir completamente en blanco y negro, prueba cambiar el valor con diversos porcentajes y ejecuta para ver el resultado.

<style>
#gatito {
  width:400px;
  filter: grayscale(100%);
}
</style>

<img id="gatito" src="https://cdn.pixabay.com/photo/2020/10/08/18/04/cats-5638647_960_720.png"/>

Función invert

La función invert simplemente se utiliza para invertir los colores de una imagen en cierta medida controlada, cuando se aplica el 100% los colores claros de una imagen se vuelven claros y los colores oscuros se vuelven claros.

Valores para invert

Los valores pueden ser numéricos o en porcentajes, 0 es igual a 0% y 1 es igual a 100%, el valor 0 mantienen la imagen original tal cual, mientras un valor de 1 o 100% hará que los colores de la imagen se inviertan completamente.

Ejemplo de invert CSS3

A continuación veamos un ejemplo de código CSS3 para ver cómo funciona esta función. Prueba a cambiar los valores de la función invert para ver cuál es el resultado.

<style>
#gatito {
  width:400px;
  filter: invert(100%);
}
</style>

<img id="gatito" src="https://cdn.pixabay.com/photo/2020/10/08/18/04/cats-5638647_960_720.png"/>

Función sepia

Este tipo de filtro es bastante conocido, se trata de un color marrón- rojizo de débil saturación; la función sepia hará que cualquier imagen tenga dicho color cuando se establece al 100%.

Valores para la función sepia

Los valores de parámetros para la función sepia pueden tomar un valor numérico del 0 al 1 o valores porcentuales del 0% al 100%; al igual que la mayoría de filtros de CSS3, 0 es igual a 0% y 1 es igual al 100%. Los valores intermedios harán que la se aplique el filtro sepia en dicha medida. 100% es completamente sepia, mientras que 0% no tiene efecto sobre la imagen.

<style>
#gatito {
  width:400px;
  filter: sepia(100%);
}
</style>

<img id="gatito" src="https://cdn.pixabay.com/photo/2020/10/08/18/04/cats-5638647_960_720.png"/>

Función hue-rotate

La función hue-rotate nos permite rotar el tono de color de una imagen, en palabras simples, nos permite cambiar la tonalidad de colores de una imagen, esto se traduce en cambio de colores. El cambio de color se hará basándose en un círculo de color, este círculo consiste en un círculo con los colores, un ángulo de rotación señala un color determinado, cuando se aplica esta función a una imagen, sus colores cambiarán de acuerdo al valor que tome dicha rotación. A continuación, veamos el círculo de rotación de colores.

Valor para hue-rotate

El valor para la función hue-rotate es un ángulo de rotación, sus unidades pueden ser: deg (recuerda que un círculo completo tienen 360deg), rad (los radianes, una vuelta completa son 2π radianes, entonces 180deg es igual; a π o 3.14 aproximadamente).

En nuestro caso utilizaremos deg, las unidades del círculo mostrado anteriormente; observa el círculo tiene el color rojo en 0deg; si rotamos a 120deg notaremos que la rotación se hace a color verde, esto hace que los tonos rojos pasen a ser verdes; si rotamos a 240, los rojos se vuelven azulados y si rotamos a 300 los rojos se vuelven púrpuras. Veamos mejor con un ejemplo.

La función hue-rotate también admite valores negativos, funcionan de manera similar pero en sentido contrario.

Ejemplo de hue-rotate css3

En el siguiente ejemplo se hace una rotación a 120deg, notarás que los colores de la imagen cambian, y verás que los rojos cambian a verde, pues 120deg, corresponde a dicho color.

Prueba a cambiar y probar nuevas rotaciones tu mismo en este editor:

<style>
#gatito {
  width:400px;
  filter: hue-rotate(120deg);
}
</style>
Imagen original:<br>
<img width="400px" src="https://cdn.pixabay.com/photo/2020/10/08/18/04/cats-5638647_960_720.png"/>
<br><br>

Imagen con rotación de color:<br>

<img id="gatito" src="https://cdn.pixabay.com/photo/2020/10/08/18/04/cats-5638647_960_720.png"/>

Función satúrate

Con esta función podemos controlar la saturación de colores de una imagen, podemos hacer que una imagen tenga una baja saturación de colores, así como también una alta saturación. En palabras sencillas, baja saturación es como una imagen con poca pintura de color y alta saturación es como una imagen con mucha pintura de color. ¿Qué te parece la analogía? jaja. Quizá no tan bien, mejor veamos con ejemplos.

Valores para satúrate

Los valores del paramento para controlar la saturación de colores pueden ser numéricos o porcentuales; similar como en casos anteriores, 0 es lo mismo que 0% y un valor numérico de 1 es igual que un valor porcentual del 100%. A diferencia de otras, esta función acepta valores superiores al 100%.

0% es una imagen sin colores, nada saturada, es decir en blanco y negro; por otro lado 100% hará que la imagen no sea afectada, es decir mantiene el aspecto de la imagen original, cuando el valor supera el 100% la imagen queda más saturada, es decir los colores se notan más reflejados, veamos algunos ejemplos y diferencias.

Ejemplos de filtro saturate css3

A continuación tenemos algunos ejemplos de imágenes saturadas al 30%, tú puedes cambiar dicho valor y notar la diferencia de resultados al ejecutar el código.

<style>
#gatito {
  width:400px;
  filter: saturate(30%);
}
</style>

<img id="gatito" src="https://cdn.pixabay.com/photo/2020/10/08/18/04/cats-5638647_960_720.png"/>

Función contrast

Mediante la función contrast podemos controlar el contraste de los colores de la imagen, aumentar o disminuir el contraste, mediante los valores del parámetro.

Valores de contrast CSS3

Los valores pueden ir expresados en porcentajes o simplemente con números, 0 da el mismo resultado que 0% y 1 da el mismo resultado que 100%.

Un valor de contraste del 0% hará que la imagen tomo un contraste totalmente gris y un valor del 100% no afecta, por ende la apariencia de la imagen original se mantiene; para aumentar el contraste de una imagen debemos colocar un valor superior al 100%, cuanto mayor, mayor contraste toma la imagen resultante.

Ejemplo de función contrast

A continuación presentamos un ejemplo, donde fijamos el contraste en un 150%, que sería lo mismo que 1.5 en valor numérico, puedes jugar con el código y probar nuevos valores para ver el resultado.

<style>
#gatito {
  width:400px;
  filter: contrast(150%);
}
</style>

<img id="gatito" src="https://cdn.pixabay.com/photo/2020/10/08/18/04/cats-5638647_960_720.png"/>

Función opcacity

Mediante la función opacity podemos controlar la opacidad de un elemento como una imagen; hacer que una imagen sea más o menos opaca, incluso hacerla totalmente transparente, para ello emplearemos los valores del parámetro.

Valores para opacity

Los valores pueden ser expresados en porcentajes, 0% hará que la imagen sea totalmente transparente y 100% no aplica ningún cambio visual sobre la imagen, es decir mantiene la apariencia de la imagen original.

Ejemplo de opacity css3

Ahora veamos un ejemplo para ver cómo funciona el filtro de opacity en css3. Ya sabes que puedes jugar y probar diferentes valores.

<style>
#gatito {
  width:400px;
  filter: opacity(50%);
}
</style>

<img id="gatito" src="https://cdn.pixabay.com/photo/2020/10/08/18/04/cats-5638647_960_720.png"/>

Función brightness

La función brightness nos permite ajustar el brillo de una imagen, podemos hacer que una imagen aumente su brillo o en caso contrario hacer que oscurezca, para establecer el grado de iluminación haremos uso de valores.

Valores para Brightness

Los valores pueden ser expresados en porcentajes (%), donde 0% y valores negativos harán que la imagen oscurezca completamente, es decir se volverá de color negro; a medida que va aumentando el valor la imagen se irá aclarando hasta que se llega al 100%, donde se muestra la imagen original sin cambios; podemos seguir aumentando el brillo, hasta volverla más brillante y hasta totalmente blanco.

Ejemplo de brightness

Ahora veamos un ejemplo para que no te quede ninguna duda al respecto. Recuerda que puedes modificar el código y probar nuevos valores para ver la diferencia.

<style>
#gatito {
  width:400px;
  filter: brightness(40%);
}
</style>

<img id="gatito" src="https://cdn.pixabay.com/photo/2020/10/08/18/04/cats-5638647_960_720.png"/>

Función blur

La función blur de CSS3, nos permite manejar el desenfoque de la imagen, podemos hacer que la imagen se vea más o menos desenfocada, para controlar la intensidad de desenfoque haremos uso de los valores.

Valores para blur

Para controlar el desenfoque debemos especificar el valor del parámetro: radius; a diferencia de otras, este valor no se expresa en porcentajes, sino en píxeles (px).

Mediante un valor con unidades en píxeles podemos definir la cantidad de píxeles que se mezclan para producir el efecto de desenfoque. Cuanto más píxeles se mezclan, mayor efecto de desenfoque se produce, cuanto menor es la cantidad de píxeles que se mezclan menos efecto de desenfoque se produce.

Ejemplo de blur

Veamos un ejemplo de blur, para controlar el desenfoque de una imagen. Prueba a cambiar y probar con nuevos valores, en este magnífico editor de código.

<style>
#gatito {
  width:400px;
  filter: blur(4px);
}
</style>

<img id="gatito" src="https://cdn.pixabay.com/photo/2020/10/08/18/04/cats-5638647_960_720.png"/>

La función drop-shadow

La función drop-shadow nos permite crear sombras alrededor de una imagen, para ello deberemos indicar las medidas de dicha sombra tanto en horizontal como en vertical, además podemos controlar hacia donde se creará la sombra, esto mediante valores de parámetro que conoceremos a continuación.

Valores para drop-shadow

Los valores para controlar la sombra están dados en el siguiente orden: w, h, b, c, todo esto entre paréntesis; donde:

• W: ancho
• H: altura
• B: desenfoque
• C: color

Ancho, altura y desenfoque pueden ser expresados en píxeles, el color puede ser expresado en palabras clave como: red, blue, yellow, green, etc. o puede tomar valores hexadecimales como: #000000.

Ejemplos de drop-shadow en CSS3

Ahora veamos algunos ejemplos de código CSS para ver cómo funciona la función de filtro drop-shadow

<style>
#gatito {
  width:400px;
  filter: drop-shadow(7px 10px 2px green);
}
</style>

<img id="gatito" src="https://cdn.pixabay.com/photo/2020/10/08/18/04/cats-5638647_960_720.png"/>

Usando múltiples filtros

Ahora es posible utilizar los filtros de CSS3 con una sola declaración de filtro, es decir, es posible aplicar varios filtros sin necesidad de declararlas por separado, para ello simplemente separamos con espacios cada función de filtro con el respectivo valor del parámetro.

Ejemplo de múltiples filtros

Con una sola declaración de filtro implementaremos varias funciones como: drop-shadow, blur, grayscale; veamos como:

<style>
#gatito {
  width:400px;
  filter: drop-shadow(10px 8px 2px blue) blur(1px) grayscale(50%);
}
</style>

<img id="gatito" src="https://cdn.pixabay.com/photo/2020/10/08/18/04/cats-5638647_960_720.png"/>

[popup_anything id=»5821″]