Efecto Wishlist Beautiful Electric

Hey babies! Siento que hace como mil años que no traigo un efecto para el blog y acabo de ver que el último que subí fue en abril... ¿estamos en agosto? ¿hay algún agujero espacio-temporal por ahí y no me he dado cuenta? lol. Pues eso, que hoy traigo un nuevo efecto que se puede usar para las normas del blog, agenda o lo que más os guste.

preview

1. Vamos a Tema > Personalizar > Editar HTML y buscamos ]]></b:skin> y encima pegamos el siguiente código:

.norma {
display : block;
font-family: arial;
margin: 1px;
text-transform: uppercase;
font-size: 10px;
color:#fff;
border-left:6px solid #a9d8e2;
background:#f7b8ce;
text-shadow: 1px 1px 0px #e89db7;
padding: 2px 2px 2px 2px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

.norma:hover{
padding-left: 3px;
border-left:80px solid #a9d8e2;
filter: hue-rotate(190deg);
-webkit-filter: hue-rotate(360deg);
-moz-filter: hue-rotate(360deg);
-o-filter: hue-rotate(360deg);
-ms-filter: hue-rotate(360deg);
-webkit-transition-duration: 0.20s;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
color:#dd96af;
border-radius: 3px;
text-shadow: 1px 1px 0px #fff;
}

Ya sabéis, todo lo que está en negrita es personalizable al gusto.

2. Ahora lo único que hay que hacer es añadir un nuevo gadget HTML/Javascript y añadir el siguiente código tantas veces como nos interese, cambiando lo que está en negrita:

<div class="norma">Aquí va tu texto</div>