Tutorial:Efecto Imagen 8 ♥


Hola a todas   bueno debí haber publicado el sabado pero tenia otras cosas que hacer , asi que hoy lo estoy publicando los tutoriales que me pidieron ,este es uno ,se supone que deberia primero publicar mi reseña de un producto  por que debí hacer ase unas semanas  ,pero lo are hoy solo que no encuentro la camara  asi que con el celular nomas lo are .Hoy lo publicare la reseña y este tutorial  .El dia miercoles o jueves termina mis clases  ,pensé que era esta semana pero aun falta dar exámenes   de algunos cursos.
Bueno les dejo con este tutorial,que es un efecto para imagen como la que tengo en mi nuevo diseño ♥
Para Plantilla Basica: Ir a Plantilla/Edicion Html/Buscar con Ctrl +F  ]]></b:skin>
Para Plantilla Clasica o Blogskin:Pegar el siguiente codigo antes de </style>
.eff8 {background-image: URL(Url de la Imagen);
width: 220px;/*Ancho de la Imagen*/
height: 89px;/*Altura de la Imagen*/
opacity: 0.8;/*Opacidad */
display:inline-block;
-webkit-transition:All 0.6s ease-in-out; -moz-transition:All 0.6s ease-in-out; -o-transition:All 0.6s ease-in-out;
margin-right:1px;
border: 3px solid #92c8ba;/*borde Tamaño Tipo Color*/
}
.eff8:hover{background-position: 0 -89px;
opacity: 4.6;/*Opacidad */
border: 3px solid #fac2c2;/*borde Tamaño Tipo Color*/
-webkit-transition:All 0.9s ease-in-out; -moz-transition:All 0.9s ease-in-out; -o-transition:All 0.9s ease-in-out;}
Para Plantilla Basica: Ir a Diseño / Añadir un gadget HTML/Javascript y pegan el siguiente codigo
Para Plantilla Clasica o Blogskin:pegar el codigo donde deseen
<div class="eff8"></div>
¿Que tamaño tiene que tener la Imagen?
La imagen debe tener lo siguiente tal como dice en el codigo:
width: 220px;/*Ancho de la Imagen*/
height: 89px;/*Altura de la Imagen*/
Las dos Imagenes deben estar juntas en una sola.

Si cambian el ancho y la altura en el codigo entonces tambien lo ponen en su imagen tal como pusieron en el codigo
-89 : Si cambian la altura por ejemplo a 100 , tambien lo cambian aqui que seria -100
Si quieren que la imagen vaya hacia abajo solo quiten el - del codigo :
background-position: 0 -89px;
quedaria :
background-position: 0 89px;


Para Plantilla Basica: Ir a Plantilla/Edicion Html/Buscar con Ctrl +F  ]]></b:skin>
Para Plantilla Clasica o Blogskin:Pegar el siguiente codigo antes de </style>
.efet15 {background-image: URL(Url de la Imagen);
width: 220px;/*Ancho de la Imagen*/
height: 89px;/*Altura de la Imagen*/
opacity: 0.8;/*Opacidad */
display:inline-block;
-webkit-transition:All 0.6s ease-in-out; -moz-transition:All 0.6s ease-in-out; -o-transition:All 0.6s ease-in-out;
margin-right:1px;
border: 3px solid #92c8ba;/*borde Tamaño Tipo Color*/
}
.efet15:hover{background-position: -220px;
opacity: 4.6;/*Opacidad */
border: 3px solid #fac2c2;/*borde Tamaño Tipo Color*/
-webkit-transition:All 0.9s ease-in-out; -moz-transition:All 0.9s ease-in-out; -o-transition:All 0.9s ease-in-out;}
Para Plantilla Basica: Ir a Diseño Añadir un gadget HTML/Javascript y pegan el siguiente codigo
Para Plantilla Clasica o Blogskin:pegar el codigo donde deseen
<div class="efet15"></div>
¿Que tamaño tiene que tener la Imagen?
La imagen debe tener lo siguiente tal como dice en el codigo:
width: 220px;/*Ancho de la Imagen*/
height: 89px;/*Altura de la Imagen*/
Las dos Imagenes deben estar juntas en una sola.
Si cambian el ancho y la altura en el codigo entonces tambien lo ponen en su imagen tal como pusieron en el codigo
-220 : Si cambian la altura por ejemplo a 300 , tambien lo cambian aqui que seria -300
Si quieren que la imagen vaya hacia la derecha solo quiten el - del codigo :
background-position: -220px;
quedaria :
background-position: 220px;
Y listo ♥

9 comentarios :

  1. muy chulo el tutorial ^^ por cierto abri el club de adopta un blog por si quieres apuntarte

    ResponderEliminar
  2. 2do comentario xD Lindisiisisisisisimo Jjijiji Te pediría como hacer plantillas ? o si y atienes el tuto me lo dejas Luna? plis >3<

    ResponderEliminar
  3. woa*^* me ha encantado, gracias por el tuto)

    ResponderEliminar
  4. ¡Ha estado genial el tuto!, gracias por compartirlo.~
    Saluditos.~

    ResponderEliminar
  5. Es genial el tuto,gracias por él! Me llamaba mucho la atención cómo se hacía!
    Te está quedando precioso el nuevo diseño,me encanta cómo quedan los comments,y esas lindas imágenes de ulzzangs >w<
    Saludos kawaiiosos~!

    ResponderEliminar
    Respuestas
    1. Hola otra vez Luna!
      Quería pedirte permiso para una cosita: verás algunas bloggeras me han pedido que haga un tuto en mi blog sobre como poner un gadget transparente,ya que yo usé ese efecto en mi blog,pero el tuto lo saqué de esta entrada que hiciste:
      http://www.lunany-kawaii.com/2014/05/tutorialpersonalizar-cada-gadget.html
      Me dejarías que publicara en mi blog la parte del gadget transparente,por favor? Te pondría unos créditos bien grandes por supuesto!!
      En fin,si me das el permiso me avisas en mi blog,por favor! Cuanto antes puedas a ser posible!
      Muchísimas gracias!
      Saludos kawaiiosos~!

      Eliminar

Hola :3 Bienvenidos a Lunany-kawaii
Debera seguir las siguientes reglas:
-No insultos
-No spam
-Ni peleas
gracias ♥