hola chicas les traigo estos png pedido de Mensi-san ..... realmente lamento no haberlas hecho antes pero esq habia estado sin internet asi que estas las dejo por aca y realmente espero que te gusten!! de disculpas hice mas de una xD
efectos para las imagenes al pasar el cursor
sábado, 13 de octubre de 2012
Les traigo algunos efectos simpaticos que pueden usar para sus blog!! funcionan cuando se coloca el cursor sobre las imagenes del blog...
primero vamos a diseño de la plantilla HTML y antes de ]]></b:skin> pegamos el siguiente codigo:
primero vamos a diseño de la plantilla HTML y antes de ]]></b:skin> pegamos el siguiente codigo:
1er Efecto: efecto giratorio
primero vamos a diseño de la plantilla HTML y antes de ]]></b:skin> pegamos el siguiente codigo:
img{-webkit-transform: perspective(400px) rotateX(0deg);
-moz-transform:perspective(400px) rotateX(0deg);
-o-transform:perspective(400px) rotateX(0deg) ;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}
img:hover{
-webkit-transform: perspective(400px) rotateX(360deg) ;
-moz-transform: perspective(400px) rotateX(360deg) ;
-o-transform: perspective(400px) rotateX(360deg);}
2do efecto: efecto agrandado
primero vamos a diseño de la plantilla HTML y antes de ]]></b:skin> pegamos el siguiente codigo:
img{
-webkit-transform: perspective(400px) ;
-moz-transform:perspective(400px) ;
-o-transform:perspective(400px) ;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}
img:hover{
-webkit-transform:perspective(400px) translateZ(150px) ;
-moz-transform:perspective(400px) translateZ(150px) ;
-o-transform:perspective(400px) translateZ(150px) }
3er efecto: efecto transicion
primero vamos a diseño de la plantilla HTML y antes de ]]></b:skin> pegamos el siguiente codigo:
img{-webkit-border-top-left-radius: 100px;-webkit-border-bottom-right-radius: 100px;-moz-border-radius-topleft: 100px;-moz-border-radius-bottomright: 100px;border-top-left-radius: 100px;border-bottom-right-radius: 100px;-webkit-transition:All 1s ease;-moz-transition:All 1s ease;-o-transition:All 1s ease;}img:hover{-webkit-border-top-right-radius: 100px;-webkit-border-bottom-left-radius: 100px;-moz-border-radius-topright: 100px;-moz-border-radius-bottomleft: 100px;border-top-right-radius: 100px;border-bottom-left-radius: 100px;-webkit-border-top-left-radius: 0px;-webkit-border-bottom-right-radius: 0px;-moz-border-radius-topleft: 0px;-moz-border-radius-bottomright: 0px;border-top-left-radius: 0px;border-bottom-right-radius: 0px;}
4er efecto: efecto que gira hasta desaparecer
primero vamos a diseño de la plantilla HTML y antes de ]]></b:skin> pegamos el siguiente codigo:
img{
-webkit-transform: rotate(0deg) scale(1);
-moz-transform: rotate(0deg) scale(1);
-o-transform: rotate(0deg) scale(1);
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}
img:hover{
-webkit-transform: rotate(360deg) scale(0);
-moz-transform: rotate(360deg) scale(0);
-o-transform: rotate(360deg) scale(0)
}
Texto que se esconde
miércoles, 10 de octubre de 2012
hola chicas les trigo un nuevo gadget para sus blogs!! es un truquito de esconder algun texto en sus blogs!! por ejemplo yo tengo creditos escondidos:
como siempre van y habren su gadget HTML y pegan el codigo de aki abajito :
<center><div id="spoiler"><div><input value="Creditos!!=D" style="width:200px;font-size:12px;background-image: url(URL DE FONDO);-moz-border-radius: 5px; border-radius: 5px;margin:13px;padding:0px;border-style: 2px solid #ff9fcc;" type="button" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'hide spoiler!'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'show spoiler!'; }" /><div id="show" style="display: none; background-color:transparent; background-repeat:repeat; margin: 0px;border-width:0px; padding:3px; width:90%">Texto que quieres esconder ^^</div></div></div></center>
Cambios:
morado: texto que si se ve
rojo: largo del icono
Fucsia: url de fondo
verde: texto que vamos a esconder
bueno eso es todo bay
Suscribirse a:
Entradas (Atom)