SummArg | Cursos y recursos para webmasters

07/10/2013

Filtros para imágenes en CSS3

CSS3 incorpora los filtros para imágenes, los cuales modifican el aspecto visual de cualquier imagen en base a determinados parámetros y valores que podemos indicar. Los filtros son: contrast, brightness, blur, saturate, hue-rotate, sepia, contrast, invert, saturation y grayscale. Los efectos de filtro se resuelven desde el navegador a medida que se dibuja la imagen, siendo un excelente recurso para los desarrolladores web, quienes en pocas líneas pueden cambiar el aspecto de cualquier imagen.

Lamentablemente funciona sólo en navegadores que soporten WEBGL, lo que solo está disponible en Chrome 18. Se espera que Safari 6 lo incorpore y de allí es cuestión de un poco de paciencia para verlo funcionando en todos los navegadores.

original

.blur {
 -webkit-filter : blur(5px);
-moz-filter : blur(5px);
-ms-filter : blur(5px);
-o-filter : blur(5px);
filter : blur(5px);
}

blur

.hue-rotate {
-webkit-filter : hue-rotate(50deg);
-moz-filter : hue-rotate(50deg);
-ms-filter : hue-rotate(50deg);
-o-filter : hue-rotate(50deg);
filter : hue-rotate(50deg);
}

hue-rotate

.sepia {
 -webkit-filter : sepia(100%);
-moz-filter : sepia(100%);
-ms-filter : sepia(100%);
-o-filter : sepia(100%);
filter : sepia(100%);
}

sepia

.brightness {
 -webkit-filter : brightness(65%);
-moz-filter : brightness(65%);
-ms-filter : brightness(65%);
-o-filter : brightness(65%);
filter : brightness(65%);
}

brightness

.contrast {
-webkit-filter : contrast(400%);
-moz-filter : contrast(400%);
-ms-filter : contrast(400%);
-o-filter : contrast(400%);
filter : contrast(400%);
}

contrast

.invert {
 -webkit-filter : invert(100%);
-moz-filter : invert(100%);
-ms-filter : invert(100%);
-o-filter : invert(100%);
filter : invert(100%);
}

invert

.saturation {
 -webkit-filter : saturate(70%);
-moz-filter : saturate(70%);
-ms-filter : saturate(70%);
-o-filter : saturate(70%);
filter : saturate(70%);
}

saturation

.grayscale {
 -webkit-filter : grayscale(100%);
-moz-filter : grayscale(100%);
-ms-filter : grayscale(100%);
-o-filter : grayscale(100%);
filter : grayscale(100%);
}

grayscale

Fuente: techstream.org | Mas info w3.org | Demo 

Dejar un comentario