Variables

La variable es un espacio que almacenamos en la memoria y en css se puede utilizar de la siguiente forma
vamos a crear el contenedor de variables universales para utilizarlas en todas nuestras variables en este caso son 2 colores rojo y azul claros.

:root {
--rojo:#f44;
--azul:#66f;
}

Variables con :root

Esta propiedad nos permite traer variables globales y utilizarlas en nuestras clases

Filter

Filter none

Imagen con filter none (propiedad por defecto)

Filter blur

Imagen con filter blur(10px) "los pixeles que queramos"

Imagen con filter:brightness(0) los brillos van de:
0 = nada de brillo
0.5 = la mitad de brillo
1 = brillo por defecto
2 = El doble de brillo
10 = Brillo 10 veces fuerte
"

Filter: brightness

filter:brightness(0)

filter:brightness(0.5)

filter:brightness(1)

filter:brightness(2)

filter:brightness(10)

Filter: contrast

Imagen con filter:contrast(0) los contrastes van de:
0 = nada de contraste
0.5 = la mitad de contraste
1 = contraste por defecto
2 = El doble de contraste
10 = contraste 10 veces fuerte
"

filter:contrast(0)

filter:contrast(0.5)

filter:contrast(1)

filter:contrast(2)

filter:contrast(10)

Filter: drop-shadow().

filter: drop-shadow(10px 10px 5px #000).
con los valores dentro del parentesis podemos modificar la sombra dentro de la imagen.

Filter: box-shadow().

Filter: grayscale().

hue-rotate();

Para cambiar los colores de un logo utilizamos hue-rotate.

hue-rotate(40deg);

hue-rotate(100deg);

invert();

Con invert invertimos los colores.

invert(0%);

invert(100%);

invert(100%);

opacity();

Es la opacidad de nuestra imagen.

opacity(0.5);

opacity(1);

saturate();

Es la saturacion de nuestra imagen.

saturate(100%);

saturate(400%);

sepia(1);