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.

Categorías: Trucos Blogger

0 comentarios

Deja una respuesta

Marcador de posición del avatar

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