Íconos que crecen - Efecto CSS




Hacer crecer los íconos que tengamos en nuestra página es algo que se puede hacer muy fácilmente a través de un efecto CSS y un Gadget HTML/Javascript, solo debemos colocar el siguiente estilo CSS en la plantilla sobre la etiqueta </head> (Plantilla / Editar HTML) y luego colocar el código para las imágenes en el Gadget HTML/Javascript (Diseño).
----------------------------------------

<style type="text/css">

.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}

.bubblewrap li{
display:inline;
width: 60px;
height:60px;
}

.bubblewrap li img{
width: 64px; /*Ancho de cada imagen*/
height: 64px; /*Alto de cada imagen*/
border:0;
margin-right: 1px; /*Espacio entre cada imagen al crecer*/
-moz-transition:-moz-transform 0.1s ease-in; 
-webkit-transition:-webkit-transform 0.1s ease-in; 
-o-transition:-o-transform 0.1s ease-in; 
-ms-transition:-o-transform 0.1s ease-in;
}

.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*Escala en la que crece la imagen 1.8x*/
-webkit-transform:scale(1.8); /*Escala en la que crece la imagen 1.8x*/
-o-transform:scale(1.8); /*Escala en la que crece la imagen 1.8x*/
-ms-transform:scale(1.8); /*Escala en la que crece la imagen 1.8x*/
}

</style>

----------------------------------------

Luego debemos crear un Gadget HTML/Javascript y en él colocar el siguiente código:

----------------------------------------
<ul class="bubblewrap">
<li><a href="URL que redirecciona 1"><img src="URL del ícono 1 .png" title="Título de la página 1" /></a></li><li><a href="URL que redirecciona 2"><img src="URL del ícono 2 .png" title="Título de la página 2" /></a></li><li><a href="URL que redirecciona 3"><img src="URL del ícono 3 .png" title="Título de la página 3" /></a></li><li><a href="URL que redirecciona 4"><img src="URL del ícono 4 .png" title="Título de la página 4" /></a></li><li><a href="URL que redirecciona 5"><img src="URL del ícono 5 .png" title="Título de la página 5" /></a></li>
</ul>

----------------------------------------

RECOMENDACIONES: El alto y ancho de cada ícono lo da el estilo, se recomienda que el tamaño original de la imagen al subirla a la red sea el apróximado al tamaño que tendrá el ícono al crecer, por ejemplo, si se va a dejar el tamaño de ejemplo 64px X 64px lo ideal sería que el ícono original tuviera unas medidas de 128px X 128px ya que la resolución que se toma cuando el ícono crece es la original de la imagen, y si se sube una imagen de 64px X 64px al hacerla crecer se podría ver un poco borrosa.

La distancia entre cada ícono que sale en el estilo es de 1px y se aplica con los íconos en su mayor tamaño, es decir, cuando se visualiza el efecto, entonces, si se piensa dejar el gadget en una columna se recomienda hacerlo con no más de tres íconos, o si se piensan dejar varios íconos, es mejor hacerlo con unas medidas por ejemplo de 30px X 30px.

Es recomendable no cambiar la escala (1.8) en el estilo, ya que es algo que su autor dejó como medida ideal luego de haber realizado varias pruebas.

Importante: El procedimiento se puede realizar también en una entrada, lógicamente en modo HTML, pero es importante que nunca se pase a modo Redactar o se perderá el efecto, se separaría el contenido del código y sería mejor volverlo a agregar en modo HTML y reemplazar su contenido con nuestra información.

Si quieren que los enlaces se abran en otra pestaña o ventana, visiten la siguiente ENTRADA para que conozcan la forma de hacerlo directamente desde la plantilla, o agregándole un código target="_blank" a cada enlace en dado caso de que esta sea la primera vez que aplican un tutorial de Charkleons.com para Blogger.

Autor original: Dynamic Drive

Espero que esta información les sea muy útil.

Gracias.



Cómo poner botones con efecto de crecer en blogger, tutorial botones que crecen en blogger, tutorial íconos que crecen en blogger, íconos que crecen el doble en blogger, imágenes que crecen el doble en blogger, código hacer crecer el doble las imágenes en blogger, código hacer crecer el doble los íconos en blogger, tutorial hacer crecer las imágenes en blogger, íconos de las redes sociales con efectos css, botones de las redes sociales con efectos css,