¿Cómo agregar el efecto Blur en imágenes en múltiples navegadores?

05-06-2014 - Andrés Cruz

¿Cómo agregar el efecto Blur en imágenes en múltiples navegadores?

Este material forma parte de mi curso y libro completo; puedes adquirirlos desde el apartado de libros y/o cursos.

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


Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.

Conozca nuestros cursos sobre Laravel, CodeIgniter, Flutter, Electron, Django, Flask y muchos más!

Ver los cursos
¡Hazte afiliado en Gumroad!

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
!Web Alojada en Hostinger!