[Tutoriales] Efectos en imágenes

Holiii!!!! ya es viernes, y hoy os traigo la primera entrada de esta sección, que espero que os guste. Bueno, hoy os voy a explicar como ponerle efectos a las imágenes del blog, cosas que he aprendido en internet, aunque sobre todo en el blog de Lunany Kawaii. Así que créditos para ella.

Empecemos.

Primero que todo, entramos en Blogger>Plantilla>Editar HTML, allí haz clic en el HTML, y pulsa Ctrl+F (si tienes un MAC, es Cmd+F), y te aparecerá un cuadradito, que si eres iniciada en esto, te adelanto que es para buscar. Y copiamos el código: ]]></b:skin>

Y justo antes, es donde vamos a copiar los códigos para ponerles efectos a las imágenes.

Para poner el efecto en todas las imágenes del blog (en esto tienes que tener en cuenta que también saldrá el efecto en la cabecera) tienes que empezar con el codigo:  img {

Y si quieres ponerlo solo en ciertas ocaciones, pones punto, y el nombre que quieras ponerle al efecto, por ejemplo: .efecto1 {

Después de eso, en el siguiente renglón, vamos a poner los códigos de como va a estar la imagen normal, sin tener el cursor encima. Aquí podemos poner mogollón de cosas, bastantes más de las que yo os voy a poner aquí, pero bueno, este tutorial es sobre todo para iniciados en esto, y yo tampoco es que sea una profesional, así que pondré los más comunes, los que yo se, y seguramente me faltarán de los que sé.

Si queremos que la imagen transparente, ponemos el código:

opacity: (aquí ponemos cuanto se va a ver la imagen, cuanto más alto sea el numero, hasta 1, más se verá);

Para los bordes redondeados:

border-radius: (el número, cuanto mayor, más redondeadas las esquinas)px;

Para ponerle bordes:

-Si quieres que los bordes sean en toda la imagen:

border: (el número, cuanto mayor sea, más grueso el borde)px solid(aquí lo puedes cambiar por dashed, que es con guiones, o por dotted, que es con puntitos) #(aquí el número del color que quieres que sea el borde, te dejo una página para mirarlo aquí)

-Si quieres ponerlo en, por ejemplo, solo los bordes de arriba y abajo, o ponerlo diferente en cada lado, pondríamos este código:

border-top(este para arriba): 3px solid #FF0000;
border-bottom(abajo): 3px solid #FF0000;
border-left(izquierda): 3px dashed #BDBDBD;
border-right(derecha): 3px dashed #BDBDBD;

Luego de poner esos códigos, os recomiendo que pongáis el siguiente, para que luego no se vea muy brusco el cambio cuando pasas el ratón por encima:

-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-out;

Y por último, cuando terminemos con esto, debemos cerrarlo todo con la llave: }

Yo por ejemplo, lo voy a poner todo así:

img {
opacity: 0.5;
border-radius: 10px;
border:none;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-out;
}

Pongo lo de border:none; para que no salga ningún borde.
Y en la plantilla, quedaría tal que así:

Ahora, vamos a poner los códigos para cuando se pasa el ratón por encima de la imagen. Primero, ponemos en el siguiente renglón, siempre antes de ]]></b:skin>, el codigo: img:hover {, si es para todas las imágenes, y si es solo para algunas ocasiones, ponemos .(el nombre que pusiste antes):hover {

Y ahora ponemos debajo los códigos. Podemos poner todos los que salen antes de forma diferente, y además, también podemos hacer que se haga más grande o más pequeño, por ejemplo, con este código:

-webkit-transform: scale (aquí ponemos cuanto se va a agrandar o empequeñecer, por ejemplo, 0.1, para más pequeño, o 1.5, para más grande. Va entre paréntesis);

Y para que rote:

-webkit-transform: rotate (aquí cuanto mayor el número, más rota. Podemos ponerlos hasta 360deg, que es un giro completo. Vá entre parentesis) (talnumerodeg);

Si queréis poner las dos cosas, debéis ponerlas así:

-webkit-transform: scale(1.2)rotate(20deg);

Y por último lo cierran todo con }. A mi al final el código me queda así:

img {
opacity: 0.5;
border-radius: 10px;
border:none;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
img:hover {
opacity:1;
border-radius: 20px;
-webkit-transform: scale(1.2)rotate(20deg);
}

Y en la plantilla:

Si guardáis, y no os sale el efecto tendréis que poner este código justo antes del punto y coma de cada línea:

 !important

Y al final el código quedaría tal que así:

Aquí os dejo el enlace de mi blog de prueba para que veáis que tal queda: aquí

Ahora, para los que hayan puesto la versión que solo sale el efecto en ciertas ocasiones, os digo como añadirlo a las entradas y gadgets.

Para añadirlo en un gadget, tiene que ser en uno de HTML, o de texto (si es de texto tienes que ponerlo en la parte de HTML, y para añadirlo a una entrada, pones en HTML, y en los dos casos, pones este código:

<img class="efecto1" src="URL de la imagen">

En donde pone efecto1, hay que poner el nombre que pusiste anteriormente en la plantilla del blog.

Bueno, espero que os haya servido este tutorial, aunque sea poca cosa, y si tenéis problemas, solo me lo dicen en la cbox, o en un comentario. También, si queréis que so traiga un tutorial en concreto, lo mismo.

Hasta mañana!!