Juvinao
1
Xi
Programador
Verificación en dos pasos activada
Suscripción a IA
Hola chicos Betas, el día de hoy, veremos cómo añadir una pequeñas tarjetas con efecto de desenfoque en Blogger, las cuales sirven para presentar información de una forma muy estilizada.
En un gadget HTML/ JavaScript o desde la Vista HTML de una entrada o página agrega el siguiente código:
Importante recordar qué, lo qué está dentro de <div id="tarjetas"></div> corresponde al HTML que encierra el contenido de las tarjetas.
Para más recursos para Blogger visita Mi Blog Ideas
En un gadget HTML/ JavaScript o desde la Vista HTML de una entrada o página agrega el siguiente código:
HTML:
<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>Importante recordar qué, lo qué está dentro de <div id="tarjetas"></div> corresponde al HTML que encierra el contenido de las tarjetas.
Para más recursos para Blogger visita Mi Blog Ideas
