Filtros en CSS

Filtros en CSS

Estos son algunos ejemplos del poder de CSS que nos permite manipular los valores de una imagen. Podemos aplicar filtros independientes o mezclarlos en los atributos de estos elementos.

Recorte de la imagen original de Dylan Baist-Bliss

Blur

.mi-imagen {
-webkit-filter: blur(3px);
filter: blur(3px);
}

Escala de grises

.mi-imagen {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}

Invertir

.mi-imagen {
-webkit-filter: invert(100%);
filter: invert(100%);
}

Sepia

.mi-imagen {
-webkit-filter: sepia(100%);
}

Brillo

.mi-imagen {
-webkit-filter: brightness(50%);
filter: brightness(50%);
}