Mil Trucos Blogger

Tarjetas para presentación con efecto desenfoque

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

Blogger es una plataforma muy flexible, prueba de ello es el truco que veremos hoy, el cual consta de una presentación en forma de pequeñas tarjetas con efecto desenfoque (hover, es decir al pasar el cursor por encima de la tarjeta).

Tarjetas para presentación con efecto desenfoque….

tarjetas-blogger-con-efecto-desenfoque

Vista Previa del Truco

Para agregar este truco solo debes ir a la Edición HTML de la entrada donde quieras añadir la presentación, o bien se puede añadir también en un gadget HTML/JavaScript (Diseño, Añadir Gadget, HTML/JavaScript) y luego pega los siguiente:

<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>

Cambia lo resaltado en color azul, que corresponde al contenido de las tarjetas.

Este truco es muy útil si quieres hacer una presentación muy precisa y necesitas de una solución sencilla y elegante.

0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo