Efecto de desenfoque con CSS

¡Hola! Ya pasó mucho tiempo desde mi última publicación, ya que estuve ocupado todo este tiempo.

Hoy les traigo esta idea extraída de Ayuda Bloggers en la que, utilizando la propiedad text-shadow, similaremos un efecto de blur.

Ejemplo 1: Texto

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna. Curabitur id nibh auctor tellus adipiscing pharetra. Fusce vel justo non orci semper feugiat. Cras eu leo at purus ultrices tristique.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

El HTML:

<div class="blur-texto">Texto</div>

Y el CSS:

.blur-texto {
color:transparent;
text-shadow:0 0 6px #000; /* Se puede modificar el valor de difusión y el color */
margin:0 auto;
background:#FF9797; /* Fondo del contenedor */
width:580px;
padding:10px;
}

Ejemplo 2: Utilizando transiciones

Opción 1:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna. Curabitur id nibh auctor tellus adipiscing pharetra. Fusce vel justo non orci semper feugiat. Cras eu leo at purus ultrices tristique.

HTML

<div class="blur-texto-2">Texto</div>

CSS

.blur-text-2 {
color:transparent;
text-shadow:0 0 6px #000; /* Se puede modificar el valor de difusión y el color */
margin:0 auto;
background:#FF9797; /* Fondo del contenedor */
width:580px;
padding:10px;
-webkit-transition: 0.8s; * Se puede modificar la velocidad de la transición */
-moz-transition: 0.8s;
-o-transition: 0.8s;
transition: 0.8s;
}
.blur-text-2:hover {
text-shadow:0 0 0 #000; /* Se puede modificar el  color */
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}

Opción 2:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna. Curabitur id nibh auctor tellus adipiscing pharetra. Fusce vel justo non orci semper feugiat. Cras eu leo at purus ultrices tristique.

HTML

<div class="blur-texto-3">Texto</div>

CSS

.blur-text-3 {
color:transparent;
text-shadow:0 0 0 #000; /* Se puede modificar el  color */
margin:0 auto;
background:#FF9797; /* Fondo del contenedor */
width:580px;
padding:10px;
-webkit-transition: 0.8s; * Se puede modificar la velocidad de la transición */
-moz-transition: 0.8s;
-o-transition: 0.8s;
transition: 0.8s;
}
.blur-text-3:hover {
text-shadow:0 0 6px #000; /* Se puede modificar el valor de difusión y el color */
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}

Con todos estos ejemplos ya debes estar satisfecho y espero que lo estés porque llegamos al fin de este post. Adiós, y por favor no te preocupes si no me aparezco por un largo tiempo, siempre voy a volver por lo mucho que tarde.