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

CompressNow: optimiza tus imágnes GIF, JPG y PNG.

CompressNow: optimiza tus imágnes GIF, JPG y PNG.

Ondas con SVG y CSS

Ondas con SVG y CSS

Animacion SVG sencilla con solo HTML

Animacion SVG sencilla con solo HTML

Algunos artículos que te pueden interesar

Cargas asíncronas de imágenes con jQuery en una web

Cargas asíncronas de imágenes con jQuery en una web

Se explica como emplear imágenes pequeñas en la definición del sitio web y luego -al cargar por completo la página web- cargar las imágenes con mayor resolución asíncronamente con jQuery.

Andrés Cruz 11-04-2016

Obteniendo una captura de pantalla del portapapeles (clipboard) con JavaScript

Obteniendo una captura de pantalla del portapapeles (clipboard) con JavaScript

En esta entrada veremos como copiar una imagen producto de una captura de pantalla que se encuentre guardada de manera temporal en el portapapeles o clipboard en un elemento img.

Andrés Cruz 29-01-2015

Creando reflejos en nuestras imágenes con webkit-box-reflect

Creando reflejos en nuestras imágenes con webkit-box-reflect

Se explica cómo crear un reflejo de una imagen con la propiedad webkit-box-reflect, además de su sintaxis básica que permite cambiar la posición, desplazamiento y hasta la posibilidad de aplicar máscaras para crear reflejos

Andrés Cruz 05-07-2016