CSS nos añade muchos efectos posibles a nuestros textos, a lo largo de los años hemos visto como posibilidades que antes creíamos imposibles ahora son reales, todo ello de forma ligera y sin perjudicar a la carga del sitio web.

Esta vez os quiero mostrar la posibilidad de crear textos desenfocados. Podemos hacerlo de forma rápida y sencilla con unas cuantas líneas de código, como veremos ahora. Es soportado por la mayoría de los navegadores, y en los que no se pueden hacer algunos arreglos como los que muestro al final del artículo.

Podemos hacer el color transparente pero añadir una sombra:

Código HTML

<h1>Que borrosooo</h1>

Código CSS

.h1 {
color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

Aunque existen más navegadores compatibles con el color que con la sombra del texto, con lo que puede que desees comprobar las funciones.

O bien dejar el color del texto y añadir tanta sombra que parezca borrosa, como podemos ver aquí.

See the Pen Fun with Blurred Text by Chris Coyier (@chriscoyier) on CodePen.

Vía | CSS Tricks.