Este efecto lo podemos aplicar a través de un estilo <style>. Podemos usarlo en una entrada (al final en modo HTML), o en un Gadget HTML/Javascript, y luego las imágenes (URL) las ubicamos dentro del código de ejemplo que está con la etiqueta <ul class="bubblewrap"> aLuego de haber aplicado el código en una entrada podemos pasar del modo HTML al modo Redactar sin problemas, las imágenes se visualizarán en su tamaño original, pero al actualizar el tema se aplica el efecto, no hay ningún problema con esa parte.
----------------------------------------<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 agregar las url de las imágenes al siguiente código. Remplacen las URL que redireccionan en la parte del href, y las URL de las imágenes en la parte del src. O si ya tienen experiencia, notarán que simplemente es agregarle la etiqueta <ul class="bubblewrap"> arriba del código de las imágenes, y a cada una agregarle una etiqueta <li> de apertura al inicio y una etiqueta </li> de cierre al final.
----------------------------------------
<ul class="bubblewrap">
<li><a href="URL que redirecciona 1"><img src="URL del ícono 1 .png" /></a></li><li><a href="URL que redirecciona 2"><img src="URL del ícono 2 .png"/></a></li><li><a href="URL que redirecciona 3"><img src="URL del ícono 3 .png" /></a></li><li><a href="URL que redirecciona 4"><img src="URL del ícono 4 .png" /></a></li><li><a href="URL que redirecciona 5"><img src="URL del ícono 5 .png" /></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.
Luego de haber aplicado el efecto pueden pasar a modo Redactar (entrada) y hacer clic sobre cada una de ellas para agregarles una descripción en la parte de «Propiedades», desde allí pueden agregar fácilmente las etiquetas alt y title.
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.
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.
Si quieren que los enlaces se abran en otra pestaña visiten el siguiente TEMA.
Espero que esta información les sea muy útil.
Gracias.
No hay comentarios:
Publicar un comentario
Gracias por comentar.