¿Cómo agregar el efecto Blur en imágenes en múltiples navegadores?
- Andrés Cruz
Este es un tema que ya hemos tocado en otras ocasiones en DesarrolloLibre:
Sin embargo resulta interesante y necesario saber cómo utilizar esta Técnica de Procesamiento Digital de Imágenes en múltiples navegadores incluyendo al infame Internet Explorer.
Como casi siempre en el Desarrollo Web; Internet Explorer es un caso particular, DX filter es empleada desde Internet Explorer 5.5, dejándolo de lado en conjunto con muchas otras convenciones propietarias y utilizando CSS3 como alternativa a partir de Interner Explorer 9; lamentablemente Internet Explorer no posee un buen soporte de CSS3 así que resulta verdaderamente molesto lograr un simple filtro como este el Internet Explorar; si se deseara llevar el efecto Blur a las versiones modernas tuviéramos que emplear alguna API JavaScript que realice el trabajo o emplear en Canvas.
El CSS para el efecto Blur
.blur {
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
filter: url(blur.svg#blur);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
}
Son utilizados los prefijos de los navegadores web más utilizados:
- -webkit para Google Chrome y Safari.
- -moz para Mozilla Firefox.
- -o para Opera.
- -ms para Internet Explorer (Aun sin soporte).
.blur {
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
También es empleado el filter para versiones viejas de Internet Explorer.
Soporte para versiones antiguas de Internet Explorer
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
El archivo SVG para Firefox
Por último en el código CSS anterior, incluimos un archivo SVG; pero, ¿Qué son estos archivos?
Los SVG los podemos definir cómo (tomando un estrato de la Documentación oficial de Firefox): "Gráficos Vectoriales Escalables (SVG por sus siglas en ingles) es un lenguaje de marcado XML para describir gráficos vectoriales en dos dimensiones. Básicamente, es a los gráficos lo qué XHTML es al texto. SVG ha sido expresamente diseñado para trabajar conjuntamente con otros estándares del W3C tales como CSS, DOM y SMIL."
Algunas versiones de Firefox no incorporan el uso de los filtros inclusive empleando el prefijo -moz; por lo tanto definimos un SVG para hacer el trabajo:
filter: url(blur.svg#blur);
El cuerpo del archivo:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="blur">
<feGaussianBlur stdDeviation="3" />
</filter>
</svg>
Enlaces de interés
Acepto recibir anuncios de interes sobre este Blog.
¿Cómo agregar el efecto Blur en imágenes en múltiples navegadores?
- Andrés Cruz