[TUTORIALES]2 Efectos de imagenes{2}

Hola pollitos lindos?Como estan?? Yo espero que genial...yo estoy algo...no se, este sabado es la boda de mi hermana...asi que la tencion se acumula. Ademas hoy me puse el traje que usare{para ver si me quedaba}y saben lo que paso???Adelgase mas de lo que queria,y ahora me queda grande.....si si...y no puedo cambiarlo~mi hermana dijo que no comiera nada y me quedara asi.jejej me dio risa,por que se supone que sea una situacion de felicidad,pero no dias antes de una boda...pero ni modo no dejare de hacer ejercisio...bueno...hoy les traigo una tutorial....espero que les guste mucho:

1.EFECTO #1

Preview "AQUI".

Buscamos ]]></b:skin> arriba de ese codigo colocamos lo siguiente:

.up{
padding:2px;
border: 3px solid #ffffff;
-webkit-box-shadow: 0px 0px 5px #c7c7c7;
-moz-box-shadow: 0px 0px 5px #c7c7c7;
box-shadow: 0px 0px 5px #c7c7c7;
margin:1px;
width:50px !important;
height:50px !important
opacity: 0.7;
padding: 1px;
border-radius: 2px;
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
filter: grayscale(0%);
-webkit-transition-duration: .99s;
-moz-transition-duration: .99s;
-webkit-transition-duration: .70s;
}
.up:hover{
OPACITY: 0.3; outline-style: transparent;
-webkit-filter: saturate(0%);
-moz-filter: saturate(0%);
-o-filter: saturate(0%);
-ms-filter: saturate(0%);opacity: .43;
-webkit-transition-duration: .40s;
-webkit-transform: rotate(360deg) scale(1.1) ;
-webkit-transform: rotateX(350deg) rotateY(0deg) rotateZ(0deg);
-moz-transform: rotateX(350deg) rotateY(0deg) rotateZ(0deg);
-o-transform: rotateX(350deg) rotateY(0deg) rotateZ(0deg);
-ms-transform: rotateX(350deg) rotateY(0deg) rotateZ(0deg);
transform: rotateX(350deg) rotateY(0deg) rotateZ(0deg);
}

Abrir un gadget HTML y copiar este codigo:

<a href="Link" target="_blank" title="titulo"><img class="up" src= "url imagen"/></a>

2.EFECTO #2
Preview "AQUI"

Buscamos ]]></b:skin> arriba de ese codigo colocamos lo siguiente:

@-webkit-keyframes woll{
50% {
transform: rotate(700,deg) ;
-webkit-transform: rotate(100deg) ;
-moz-transform: rotate(9deg) ;
-o-transform: rotate(10deg) ;
-ms-transform: rotate(44deg) ;
}
75% {
transform: rotate(7deg);
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-ms-transform: rotate(-10deg) ;
}
100% {
transform: rotate(7deg) ;
-webkit-transform: rotate(7deg) ;
-moz-transform: rotate(7deg) ;
-o-transform: rotate(+44deg) ;
-ms-transform: rotate(+44deg) ; }
}
.woll{
border:1px solid #ccc;
padding: 1px;
-webkit-transition-duration: .50s;
OPACITY: 1;
outline-style: transparent;
}
.woll:hover{
-webkit-animation: woll .5s alternate linear;
OPACITY: 0.7;
outline-style:transparent;
}

Abrimos un gadget HMTL y pegas el siguiente codigo:

<a href="Link"><img class="woll" src="url imagen" title="titulo" /></a>

Espero que les guste,estos efectos son geniales...les estare compartiendo mas{si es que quieren}Bueno... No tengo nada mas que decir,estare pasando por sus blogs^3^
Recuerda dejar tu comentario~
Les deejo besos de cherryT.O.P
Att:Lee rae mi{dayi}