Cross-Browser blurred text

Bueno, no se si "Texto borroso" se escribe "blurred text", pero lo importante ahora no es el título, sino la posibilidad de crear el efecto blur solo con css.

Demo / DescargarSource code

Con el siguiente código css podrás hacer que cualquier texto se vea borroso como en la imagen de arriba y funcionando en la mayoría de los navegadores.

.blur {
  text-shadow: #F00 0 0 4px;
  color: rgba(0, 0, 0, 0);
  color: #F00\9; /* Color for IE */
  width: 100%;   /* IE 5.5, 6, 7 Fix */
  filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='2.5');
  -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius='2.5')";
}

El color del texto se cambia en la propiedad text-shadow y en la tercera linea, que he necesitado usar este css hack para IE.

El tamaño o nivel de desenfoque también se cambia en la propiedad text-shadow, concretamente el ultimo valor y para Internet Explorer, para que quede lo mas parecido al resto de navegadores tiene que ser aproximadamente la mitad, yo prefiero la mitad mas 0.5 (size/2+0.5).

La tabla de compatibilidad no esta completa, pero mas o menos es así:

• Firefox: 3.1+
• Chrome: Todas las versiones
• Safari: 4+
• Internet Explorer: 5.5+
• Opera: 9+
• Konqueror 4+

El único inconveniente es que habría que crear una clase para cada efecto blur con tamaño o color diferente. También me a parecido ver que en algunas versiones de ciertos navegadores soportan rgba y no text-shadow, lo que hace no se vea nada.