Colocar los iconos en forma horizontal ?

Estado
Cerrado para nuevas respuestas

0liver

Miembro
Miembro
Hola amig@s,

Tengo una pregunta. Siguiendo este tutorial:
El efecto rollover consiste en hacer cambiar un objeto al pasar el mouse sobre él, esto resulta muy atractivo y sofisticado si se aplica bien, aunque existen varias formas de hacerlo la más fácil y efectiva es mediante unas pocas líneas de código CSS. Este efecto es muy usado en los botones de redes sociales de muchas páginas, por ende; no es una novedad aquí, pero la intención es mostrar cómo se hace y que todos puedan aplicar su propio estilo. Esta vez lo haremos creando un atractivo botón de twitter pero básicamente el fundamento es el mismo para cualquier objeto que queramos aplicarlo.

Para hacerlo usaremos una imagen oficial del repositorio de recursos de twitter a la cual le aplique una desaturación usando Photoshop para que quedara en gris. Para referencia coloque los nombre: “twitter (imagen a color), twitter-gris (imagen gris)”

twitter.png
twitter-gris.png


Ahora bien, para hacer el llamado a la imagen usaremos la etiqueta HTML ‘a’ a la cual le agregaremos una clase llamada ‘boton-twitter’ que luego definiremos mediante CSS. También agregamos el enlace a nuestra cuenta de twitter que donde llevara al usuario cuando haga clic sobre él.

El código para llamar a nuestro botón será este:
Insertar CODE, HTML o PHP:
<html>
<a href="http://www.twitter.com/ibloglabs" class="boton-twitter"></a>
</html>
Ahora nos divertimos con CSS. Haremos que el fondo se muestre como un bloque para que tenga los efectos de vínculo, además definimos el ancho, el alto y la ruta de nuestra imagen que en mi caso está colocada en la misma carpeta donde se mostrara el botón.
Insertar CODE, HTML o PHP:
a.boton-twitter{
    display:block;
     width: 186px;
     height: 162px;
     background-image:url(twitter-gris.png);
}
El código anterior mostrara la imagen estática con el vínculo a nuestra cuenta de twitter, ahora vamos a hacer el efecto rollover. Solo copiamos y pegamos el mismo código y modificamos las líneas ‘a.boton-twitter:hover’ y la ruta de la imagen para que muestre nuestra imagen en color ‘background-image:url(twitter.png);’ de esta forma.
Insertar CODE, HTML o PHP:
a.boton-twitter:hover{
    display:block;
     width: 186px;
     height: 162px;
     background-image:url(twitter.png);
}
El CSS completo debería quedar así:
Insertar CODE, HTML o PHP:
a.boton-twitter{
    display:block;
     width: 186px;
     height: 162px;
     background-image:url(twitter-gris.png);
}
a.boton-twitter:hover{
    display:block;
     width: 186px;
     height: 162px;
     background-image:url(twitter.png);
}
Con este simple código podremos hacer nuestros propios botones o bien pack de ellos hacia las redes sociales, como también cualquier otro objeto, es simple y se puede integrar a cualquier sitio.

Me gustaría saber cómo puedo hacer que los iconos aparezcan ordenados de forma horizontal, y no vertical que es como me aparecen cuando edito cada uno de los iconos de forma individual. Aquí muestro una imagen en horizontal, que es como lo quiero, y una captura de imagen en vertical que es como me aparecen:

Horizontal
sqh6o2.jpg


Vertical
vcriw0.jpg

Gracias siempre...

Un abrazo.
 

0liver

Miembro
Miembro
Bueno amigos, al final he conseguido el efecto, es más, he cambiado de método utilizando la técnica sprite.

Saludos y feliz año a tod@s!
 
Estado
Cerrado para nuevas respuestas
Arriba Pie