Movimiento para iconos de redes sociales

De aquí Captura de pantalla 2015-06-16 a les 21.24.06a aquí Captura de pantalla 2015-06-16 a les 21.24.16con un movimiento muy suave.

Podemos hacer tantas redes sociales como queramos, las imagenes las podemos hacer en photoshop y las subimos a la carpeta imagenes del servidor donde esta alojada la página web.

en la pagina principal creamos un div para que contenga nuestras redes sociales.

<div id="social">
</div>

Dentro de ese div escribiremos los enlaces de cada red social i la ruta para encontrar su respectiva imagen. Le daremos una clase diferente a todos ellos.

Para que se abran los enlaces en otra pagina escribiremos : target=”_blank”

    <div id="social">
		<ul>
			<li>
                <a href="https://twitter.com/t0nyi" target="_blank" class="twitter">
                	<img src="images/twitter.png">
            	</a>
            </li>
			<li>
                <a href="http://es.pinterest.com/tantequera/" target="_blank" class="pinterest">
                	<img src="images/pinterest.png">
                </a>
            </li>
			<li>
            	<a href="https://www.facebook.com/tonyi.antequera"target="_blank" class="facebook">
            		<img src="images/facebook.png">
                </a>
            </li>
			<li>
                <a href="http://instagram.com/t0nyi/"target="_blank" class="instagram">
                <img src="images/instagram.png">
                </a>
            </li>
			<li>
                <a href="https://www.linkedin.com/pub/tonyi-antequera/86/1b4/948"target="_blank" class="linkedin">
                	<img src="images/linkedin.png">
                </a>
            </li>
		</ul> 
	</div>

Situaremos las imágenes en orden, una debajo de la otra. de esta manera:

Captura de pantalla 2015-06-16 a les 21.45.13

 

Sólo se ve el icono, así cuando pasemos por encima se desplazaran i podremos leer el texto. Para poder colocar las imagenes de esta forma es preferible hacerlo dandoles la propiedad absolute i marcándole los puntos exactos de donde tienen que ir.

(-webkit-transition:all 1s; este atributo sera el que hará el movimiento mas alegre)

#social a.facebook{
	position: absolute;
	top: 90px;
	left: 0px;
        -webkit-transition:all 1s;
}

Así para todas.

Pasamos al movimiento, para que la imagen se mueva cuando pasamos el raton por encima escribiremos lo siguiente en el CCS:

#social a.twitter:hover{
	left:120px;
}

Así para todas.

y ya lo tenemos

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.