Filtros CSS
CSS cuenta con recursos para aplicar diversos tipos de filtros a las imágenes, para lo cual se utiliza la propiedad filter, la cual cuenta con diversos valores acordes a los diversos tipos de filtros disponibles.
Una característica de esta propiedad es que se puede definir más de un valor por llamado, es decir se pueden definir todos los filtros en un solo llamado de la propiedad.
Filtros
None
-
Se trata del valor por defecto de la propiedad, como su nombre lo indica define que no se le aplique ningún tipo de filtro a la imagen.
Blur
-
Este valor aplica un desenfoque a la imagen, para trabajar esta imagen acepta cualquier tipo de unidad de medida.
Código
Resultado
Brightness
-
Este valor define la cantidad de brillo que se le aplicará a la imagen, donde "0" es completamente oscura y "1" es el brillo normal de la imagen, se puede aplicar cualquier otro valor positivo o decimal.
Código
Resultado
En este ejemplo se aplica diez (10) veces el brillo normal de la imagen, realmente se puede aplicar el valor que se desee, incluso 100.
Contrast
-
Este valor aplica contraste a los colores de la imagen, donde "0" es nada de contraste y "1" es el contraste normal de la imagen, a su vez se puede usar el valor positivo entero o decimal que se desee.
Código
Resultado
En este ejemplo se le da a la imagen un contraste tres (3) veces mayor al original.
Nota: en este valor también se pueden usar porcentajes, donde "100%" es igual a "1".
Nota: este valor necesita que se defina un color de fondo para funcionar adecuadamente, ya que su función es generar el contraste entre el contenido y el fondo.
Drop-shadow
-
Este valor permite aplicar una sombra a aquellas imágenes de fondo transparente, para funcionar requiere de tres valores en px y que se defina el color de la sombra.
Código
Estos valores en px definen las dimensiones de la sombra.
original
Aplicando la propiedad
Una característica de este valor es que podemos aplicarlo varias veces en el mismo llamado para reforzar su efecto, logrando un resultado semejante a esto:
Literalmente copiando y pegando este valor con todos sus parámetros dentro de la propiedad se logra este tipo de resultado, en este caso para lograr el efecto anterior se aplicó el siguiente valor repetidas veces.
Grayscale
-
Este valor genera la imagen en una escala de grises (blanco y negro), donde "0" es nada de filtro y "1" es blanco y negro.
Código
Resultado
Nota: En este valor los números mayores a "1" no surten un efecto que los diferencie de este, lo que sí genera un efecto es utilizar porcentajes (%) y decimales para definir el valor.
Hue-rotate
-
Este valor permite rotar la escala de colores, esta propiedad trabaja con deg (grados) como su unidad numérica, sin embargo también acepta radianes y gradianes, sin embargo la medida más recomendable es grados, es decir en base al valor que se introduzca permite cambiar los colores de la imagen.
Código
Resultado
Invert
-
Este valor permite invertir los colores, donde "0" son los colores originales y "1" son los colores completamente invertidos, por lo tanto para definir la intensidad de la propiedad se utilizan los números decimales entre "0" y "1", también se pueden utilizar porcentajes (%) para hacerlo.
Código
Resultado
Nota: debido a la naturaleza de los colores el valor medio entre "1" y "0" (50% - 0.5) genera una escala de grises, ya que el color original mezclado con el mismo color invertido se anulan entre sí, del mismo modo que ej. 10-10=0.
Opacity
-
Este valor aplica una transparencia sobre la imagen, en esta propiedad "1" es completamente visible y "0" es completamente transparente, por lo tanto para definir la intensidad se utilizan decimales o porcentajes.
Código
Resultado
Saturate
-
Este valor añade una saturación a la imagen, donde "0" es igual a ninguna saturación y "1" es igual a la saturación original de la imagen, por lo tanto para definir la intensidad se utilizan números positivos enteros, decimales o porcentajes.
El efecto de esta propiedad se puede parecer a la de contrast, pero la diferencia entre ambas es que contrast genera el mayor contraste posible entre los colores, mientras que saturate aproxima los colores a su mayor intensidad posible.
Código
Resultado
En este ejemplo se aplica una saturación de "400%", es decir, una saturación cuatro veces mayor a la original, también se podría usar el valor "4" para obtener el mismo efecto.
Sepia
-
Este valor aplica el efecto sepia en la imagen, donde "0" es igual a ningún efecto y "1" es igual al efecto completamente aplicado, por lo tanto cualquier valor mayor a "1" no genera ninguna diferencia, por ello en este valor su intensidad se puede definir con el uso de decimales y porcentajes.
Código
Resultado
Url
-
Este valor realmente no es abarcado por el curso, sin embargo su función es la de permitir incluir filtros propios, si se desea indagar más se puede buscar un tutorial por internet.