DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
05-06-2014

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:

.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


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Animacion SVG sencilla con solo HTML

Animacion SVG sencilla con solo HTML

Efectos hover con CSS

Efectos hover con CSS

Ondas con SVG y CSS

Ondas con SVG y CSS

Algunos artículos que te pueden interesar

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

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

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

Andrés Cruz 05-06-2014

¿Cómo redimensionar imágenes con CodeIgniter?

¿Cómo redimensionar imágenes con CodeIgniter?

En este artículo veremos cómo redimensionar imágenes con Codeigniter.

Andrés Cruz 21-05-2014

El filtro Blur (desenfoque) en CSS y alguno de sus posibles usos

El filtro Blur (desenfoque) en CSS y alguno de sus posibles usos

Con solo CSS podemos crear efectos sobre nuestros elementos HTML bastantes complejos sin la necesidad de utilizar Photoshop o Gimp.

Andrés Cruz 20-01-2014