2/9/13

Efectos de imágenes ahover con muchos efectos geniales!!

hola he regresadoo !!! hello all

pero para no quedarme la verdad que si he estado aqui Pero pero tengo cosas que hacer y como ven siempre lo mismo que digo que mi vida uff ocupadisima sorry
Y la verdad solo estoy aprobando comentarios una disculpa a todos
a lo mejor hago mas entradas de mi vida ??
y dibujos yeahh digital
chicas pero volvi para darles un tutorial mega increíble que lo amaran !!
empezamos ya?
Dos codigos que haran que tus imagenes se vean muy geniales
a al final los créditos



 Empecemos


nos vamos a nuestro escritorio  e plantilla e html

y buscamos lo siguiente


.img
o
a: img {

body {

o

]]></b:skin>

por ejemplo a mi es body
abajo de body o .img  o las otras que les puse
 copiamos lo siguiente




img {webkit-filter: none;}
img:hover   Aqui va lo el estilo de efecto
-o-transition: opacity 1s linear;

o si prefieres el efecto mas lento
copia este

img{-webkit-transition: all 0.8s linear;-moz-transition: all 0.8s linear;transition: all 0.8s linear}
img:hover {-webkit-filter:   aqui va el estilo de efecto 
-o-transition: opacity 1s linear
Ahora cambiemos lo que dice aqui va el efecto:
                       el efecto que da
grayscale      tono gris                           grayscale(0.9);}
saturate           saturar colores           saturate(2);}
hue-rotate       efecto raibow              hue-rotate(300deg);}
blur                      desefoca                       blur(1px);}
opacity               aclarar                          opacity(0.4);}
sepia                   color sepia                  sepia(0.9);}
contrast           Luz intensa                   contrast(2);}

Por ejemplo:

img {webkit-filter: none;}
img:hover    grayscale(0.9);}
-o-transition: opacity 1s linear;


version lenta 

img{-webkit-transition: all 0.8s linear;-moz-transition: all 0.8s linear;transition: all 0.8s linear}
img:hover {-webkit-filter:   (saturate(2);)  
-o-transition: opacity 1s linear;

 y 
le puede cambiar como ustedes quieran
saturate opacity blur gray El que quieran !!! 

y listo tadan

YA TIENES EL EFECTO EN TU BLOG







Nota : si no sabes como se ve aqui un ejemplo
http://mimundodecreacion.blogspot.com.ar/2012/12/efecto-en-imagenes-hover-part1.html

y Adivine que
wow mañana me voy al concierto de the legend of Zelda OOOH Yeahh !! 





Creditos a
ella por
el nombre de los efectos a mi mundo de creación thanks
Todo lo demas el contenido e explicacion es 100% mia
porfavor lee lo siguiente reglamento


REGLAS PORFAVOR 
este material es 100% hecho y publicado  por :





NOS VEMOS HASTA LA PRÓXIMA  !!!










Hii muchas gracias por venir no olvides dejar un estelarcomentario

2 comentarios :

  1. Muy lindo tutorial!!! (tienes suerte de ir al concierto ;_______;)Suerte!! <3

    ResponderEliminar

Muchas gracias por dejar tu dulce comentario ^^
reglas y recuerden :
✿nada de conflictos ni peleas ok
✿no spam y
✿no groserías o ofensas a otros usuarios incluyendo al autor
SI no obedeces estas reglas que te pongo simple borro tu comentario por el bien de mi blog y de todos
muchas gracias por tu dulce atención
^u^ ♥ que tenga un Dulce pero mágico dia
sayonara

}