miércoles, 26 de septiembre de 2012

Efectos en Imagenes

Hoy voy a mostrar varios efectos que pueden poner a sus imagenes okei? son muy llamativos y muy faciles de usar..

TODOS los codigos se pegaran antes de ]]></b:skin>

empezemos con el primero:

EFECTO SEPIA

Codigo:

.post-body img {filter: sepia(100%);-webkit-filter: sepia(100%); -moz-filter: sepia(100%);-webkit-filter(1);-webkit-transition: all 0.4s linear;-moz-transition: all 0.4s linear;transition: all 0.4s linear;}.post-body img:hover{filter: sepia(0%);-webkit-filter: sepia(0%); -moz-filter: sepia(0%);-webkit-filter(0);}

*** si lo quieres invertido osea de imagen normal a efecto sepia estes es el codigo: ***

img{
-webkit-transition: all .7s linear;
-moz-transition: all .7s linear;
transition: all .7s linear
}
img:hover{-webkit-filter: sepia(100%);z-index: -99px;}



EFECTO GRAYSCALE


codigo:

.post img{-webkit-filter: grayscale(1);-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);filter: url(desaturate.svg#greyscale);filter: gray; filter: grayscale(100%);-webkit-transition: all 0.4s linear;-moz-transition: all 0.4s linear;transition: all 0.4s linear;} .post img:hover{-webkit-filter: grayscale(0);-webkit-filter: grayscale(0); -moz-filter: grayscale(0);filter: none; filter: grayscale(0);}

*** si lo quieres de imagen normal a efecto grayscale estes es el codigo: ***

img{-webkit-transition: all 0.8s linear;-moz-transition: all 0.8s linear;transition: all 0.8s linear}
img:hover{-webkit-filter: grayscale(100%);z-index: -99px;}


EFECTO BLUR



codigo:

.post-body img{-webkit-transition: all 0.4s linear;-moz-transition: all 0.4s linear;transition: all 0.4s linear;filter: blur(2px); -webkit-filter: blur(2px); -moz-filter: blur(2px);} .post-body img:hover{filter: none; -webkit-filter: blur(0px);-moz-filter: blur(0px);filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');}

*** si lo quieres de imagen normal a efecto blur estes es el codigo: ***

img{
-webkit-transition: all .7s linear;
-moz-transition: all .7s linear;
transition: all .7s linear
}
img:hover{-webkit-filter: blur(1px);z-index: -99px;}


INVERT EFFECT


codigo:

img{
-webkit-transition: all .7s linear;
-moz-transition: all .7s linear;
transition: all .7s linear
}
img:hover{-webkit-filter: invert(100%);z-index: -99px;}


EFFECTO CAMERA SHOT


codigo:

img{
-webkit-transition: all .7s linear;
-moz-transition: all .7s linear;
transition: all .7s linear
}
img:hover{-webkit-filter: brightness(15%);z-index: -99px;}

que tengan bonito dia :)



30 comentarios:

  1. lindos efectos... creo que le pondre alguno a mi blog *-*
    que tengas un lindo dia ^^

    ResponderEliminar
  2. ¿Como antes de B:skin? ¿podrias poner la imagen guia? gracias Annyz

    ResponderEliminar
    Respuestas
    1. Batatita:
      Pegas el codigo que te guste de elefecto ANTES de ]]>

      Osea,Por ej:

      (El codigo de tu efecto) ]]>

      y listo! O sinó pone el codigo de el efecto Arriba de ]]>
      Espero que te sirva n_______n

      Eliminar
    2. No me salio el codigo (nose xq pero creo que me entiendes n______n)

      Eliminar
  3. me encantoooooo ya estaba hechando de menos los truquillos que sueles colocar, este esta genial gracias annyz!!!

    ResponderEliminar
  4. Hermoso!
    Soy nueva seguidora del blog =3
    Tu blog me encanta!

    ResponderEliminar
  5. A mi blog "My World" le puse el efecto cepia, muchas gracias!!! *w*

    ResponderEliminar
  6. hola soy nueva adoro tu bloggggggggggggg es hermosos ^^ tengo un preguntica si puedes responderme la muñequita que tienes sentada en la cabecera del blog me encanta me podrias decir como se llama esa clase de muñequitas y donde las puedo descargar y la que tienes que dice subir esta rekawaiiiiiiiiiii si no es mucho pedir te lo agradeceria estoy haciendo un blog y me gustaria una muñequit asi gracias por tu colaboracion ^^

    ResponderEliminar
    Respuestas
    1. te recomiendo deviantart ahi encontraras muchas de estas munequitas n.n

      Eliminar
  7. hola-una pregunta¿como poners el efecto de arcoiris en las imagnes al pasar el cursor encima?

    ResponderEliminar
  8. Muy buen tuto los efectos son buenísimos lo utilizaré cuando lo necesito, gracias, besos, cuídate!

    ResponderEliminar
  9. Me encanto el efecto camera shot! espero ponerlo en el nuevo diseño de mi blog C:
    Queria saber cuando me iba a llegar mi regalo *-*

    #Besitos# :D

    ResponderEliminar
    Respuestas
    1. charlie nena te envie mail hace dias.. n.te he mando 2 mail y te avise en tu blog..ecesito me contestes.

      Eliminar
  10. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  11. Hola annyz!!
    Tienes un premio en mi blog:
    http://anarodrimen.blogspot.com.es/2012/09/premio.html#more

    ResponderEliminar
  12. hola annyz, me encanta tu blog... Estoy haciendo un blog de consejos. Pero necesito de tu ayuda, podriashacerme una cabecera png que diga "Un consejito mas"??
    si podrias te lo agradeceria tanto! Tambien si dices que si podrias mandarmelo por MSN? a Mundopiagarcia@hotmail.com

    besos y amo tu blog!! sigue asi

    ResponderEliminar
  13. Hola mi blog es www.consejosparaelbienestar.blogspot.com y nesecito ponerle unos de esos efectos pero no puedo porque no se como y en donde ponerlos solicito ayuda pliss

    ResponderEliminar
  14. disculpa annyz soy yo otra vez..gomene u.u
    lo que pasa esque
    no me sale ese efecto :/
    y
    ya le quite el efecto que era que se opacaba y
    tbm el que cuando elijeis una imagen se ponen borde
    pero de todos modos no me funciona tampco el de arcoiris
    me podrias ayudar :/
    espero no causarte problemas
    platilla pictor windoms
    y
    blog
    http://lovelysit.blogspot.mx/
    XD
    jejeje gracias

    ResponderEliminar
  15. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  16. me gusta mucho tu blog, gracias a el he modificado mi blog y aora esta bastante bn ,pero para que este mejor, te tienes que pasar, seguirme y si puedes ayudarme a conseguir seguidores ;) patriusibu.blogspot.com.es , adios¡¡

    ResponderEliminar
  17. Hola Annyz! ehm...te quería preguntar ¿como puedo poner esa Imagen Chibi que tienes es tú blog? te preguntaras Cual, me refiero ala que esta aquí abajo l Chica Chibi que dice "Subir" me pregunto como puedo ponerla por favor me podrías enseñar o un Tutorial, por favor, si no es Molestia, y te juro que Amo tú blog tiene muchas cosas Interesantes, Siempre lo veo y Descargo, Muchas Gracias.

    Kuro-chan ^-^

    ResponderEliminar
    Respuestas
    1. claro en la categoria tutoriales solo busca : imagen estatica en la esquina del blog [modo facil] ahi explico como ponerla :P

      en el menu arriba en la parte superior izquierda encontraras que dice tutorial ahi das clic y buscas la opcion de la imagen estatica ^^ tambien contraras muchos tutos que te podran ayudar a poner mas lindo tu blog.. besos

      Eliminar
  18. Annyz! Muchas Gracias, ahora voy a buscar lo que me dijiste!! y te aprovecho de dar las Gracias!!
    Arigatou!! =---=

    Kuro-chan

    ResponderEliminar
  19. me acabo de unir a tu blogg..oigan bloguerr siganme en mi blogg!!!NUevoo http://cositassparaphotoscape.blogspot.com/

    ResponderEliminar
  20. Hola, acabo de descubrir tu blog y me gusta mucho. Tienes muy buenos trucos. Tengo una pregunta con respecto a esto, ¿cómo puedo hacer para que el efecto se vea en la sidebar pero no afecte las imágenes de los post?

    Saludines :)

    ResponderEliminar

Nota: solo los miembros de este blog pueden publicar comentarios.