Texto con efecto de desenfoque en Blogger

En el día de hoy veremos como añadir un cuadro de texto con efecto de desenfoque, logrado con un poco de CSS, este truco podría ser muy útil para casos puntuales, como el caso en el que quieras generar un mensaje que resalte sobre los demás.

Texto con efecto de desenfoque en Blogger
Texto con efecto de desenfoque en Blogger

Desde la Vista HTML de una entrada o desde un gadget HTML/JavaScript (Diseño, Añadir Gadget, HTML/JavaScript) pega lo siguiente:

<style type='text/css'>
/* efecto desenfoque */
.gaus {
color:transparent;
text-shadow:0 0 9px black;
margin:0 auto;
background:#dedede; /* Color de fondo del mensaje borroso */
width:580px; /* ancho */
position:relative;
height:200px; /* alto */
padding:10px;
}
.interno {
left:25%;
width:50%;
height:30%;
bottom:25%;
text-align:center;
padding:20px 10px;
position:absolute;
background:#000000; /* color de fondo del mensaje */
color:#ffffff; /* color de letra del mensaje */
text-shadow:none;
border:1px solid #fff; /* color del borde */
box-shadow:0 0 3px #222;
cursor:move;
}
</style>

<div class="gaus">
<div class="interno">
Este es un ejemplo de un mensaje que se sobrepone sobre otro contenedor que se ve borroso.</div>
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.</div>

Lo resaltado en el <div class="interno"> en color azul corresponde al texto que está superpuesto y el color verde es el que está desenfocado.

A continuación puedes ver una vista previa del truco:

Entradas que pueden interesarte

disqus