Pequeñas tarjetas con efecto de desenfoque en Blogger

El día de hoy veremos cómo añadir un truco muy útil en Blogger, se trata de una pequeñas tarjetas que vienen con un precioso efecto de desenfoque al pasar el cursor por ellas, además de girar algunos grados sobre su eje; el truco puede ser útil para presentar información muy detallada y clasificada.

Pequeñas tarjetas con efecto de desenfoque en Blogger
Pequeñas tarjetas con efecto de desenfoque en Blogger


En un gadget HTML/ JavaScript o desde la Vista HTML de una entrada o página agrega el siguiente código:


<style type='text/css'>
#tarjetas {
width:550px;
margin: 0 auto;
background:#transparent;
border:1px solid #FFF;
box-shadow:0 0 1px #CCC;
padding:0 10px 10px 10px;
}
.tarjeta {
float:left;
width:100px;
padding:10px;
background:#FCFCFC;
line-height:10px;
font-size:9px;
color:transparent;
text-shadow:0 0 3px black;
box-shadow: 0 0 7px #ccc;
border-radius:1px;
margin-left:10px;
margin-top:10px;
-moz-transition: 0.4s;
-webkit-transition: 0.4s;
-o-transition: 0.4s;
transition: 0.4s;
}

.tarjeta:hover {
box-shadow:2px 2px 1px #ccc;
-webkit-transform: rotate(5deg) scale(1.2) skew(1deg) translate(0px);
-moz-transform: rotate(5deg) scale(1.2) skew(1deg) translate(0px);
-o-transform: rotate(5deg) scale(1.2) skew(1deg) translate(0px);
color:#222;
text-shadow:0 0 1px white;
background-image: linear-gradient(bottom, rgb(245,245,245) 17%, rgb(255,255,255) 59%);
background-image: -o-linear-gradient(bottom, rgb(245,245,245) 17%, rgb(255,255,255) 59%);
background-image: -moz-linear-gradient(bottom, rgb(245,245,245) 17%, rgb(255,255,255) 59%);
background-image: -webkit-linear-gradient(bottom, rgb(245,245,245) 17%, rgb(255,255,255) 59%);
background-image: -ms-linear-gradient(bottom, rgb(245,245,245) 17%, rgb(255,255,255) 59%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.17, rgb(245,245,245)),
color-stop(0.59, rgb(255,255,255))
);
}

.tarjeta p {
font-size:13px;
}
</style>

<div id="tarjetas">
<div class="tarjeta"><p>Título</p>
Sitúen el mouse sobre esta tarjeta y verán el contenido.</div>
<div class="tarjeta"><p>Título</p>
Sitúen el mouse sobre esta tarjeta y verán el contenido.</div>
<div class="tarjeta"><p>Título</p>
Sitúen el mouse sobre esta tarjeta y verán el contenido.</div>
<div class="tarjeta"><p>Título</p>
Sitúen el mouse sobre esta tarjeta y verán el contenido.</div>
<div class="tarjeta"><p>Título</p>
Sitúen el mouse sobre esta tarjeta y verán el contenido.</div>
<div class="tarjeta"><p>Título</p>
Sitúen el mouse sobre esta tarjeta y verán el contenido.</div>
<div class="tarjeta"><p>Título</p>
Sitúen el mouse sobre esta tarjeta y verán el contenido.</div>
<div class="tarjeta"><p>Título</p>
Sitúen el mouse sobre esta tarjeta y verán el contenido.</div>
<div style="clear: both;">
</div>
</div>

Lo resaltado en color naranja corresponde al contenido de las tarjetas, desde allí podrás personalizar los mensajes que ellas muestran.

 A continuación puedes ver una vista previa de las tarjetas:

Título

Sitúen el mouse sobre esta tarjeta y verán el contenido.

Título

Sitúen el mouse sobre esta tarjeta y verán el contenido.

Título

Sitúen el mouse sobre esta tarjeta y verán el contenido.

Título

Sitúen el mouse sobre esta tarjeta y verán el contenido.

Título

Sitúen el mouse sobre esta tarjeta y verán el contenido.

Título

Sitúen el mouse sobre esta tarjeta y verán el contenido.

Título

Sitúen el mouse sobre esta tarjeta y verán el contenido.

Título

Sitúen el mouse sobre esta tarjeta y verán el contenido.

Entradas que pueden interesarte

disqus