Hola que tal este es mi primer post desde hace 2 años que no publico nada, no sean duros conmigo...
Les enseñare como hacer un bonito plug o sección de redes sociales en este caso de 4 bloques, para su sitio web o pagina, haciendo uso de html5 y css3.
Para ello utilizaremos imágenes de tipo PNG del logo de las redes sociales a utilizar en este ejemplo yo utilizare estos cuatro:
A hora removeremos el fondo de color para dejar únicamente nuestro logo de forma PNG limpia, utilizaremos la herramienta Photoshop (puede utilizar cualquier otra herramienta que deseen).
Una vez obtenido nuestro icono de formato PNG, seguiremos con estructurar la sección
en un documento HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Plug Redes Sociales</title>
</head>
<body>
<div class="caja-redes-sociales">
<img src="facebook.png" class="steps facebook">
<img src="twitter.png" class="steps twitter"></span>
<img src="instagram.png" class="steps instagram"></span>
<img src="youtube.png" class="steps youtube"></span>
</div>
</body>
</html>
Y le asignamos este siguiente codigo CSS
.caja-redes-sociales{
width:400px;/*Tamaño de la caja que cubre las cuatro imagenes*/
height:400px;
margin:150px auto 0px auto; /* Determina los margenes, en este caso se encuentra centrada*/
}
.steps{ /Clase que se aplica a todas las imágenes determina el tamaño*/
width:50%;
height:50%;
cursor:pointer;
}
.facebook , .twitter , .instagram, .youtube{ /*A cada elemento le asignamos un flotante para acomodarlos*/
float:left;
background-size:100% 100%;
}
.facebook:hover{ background-color:#457e9b;}
.twitter:hover{ background-color:#62afd1;}
.instagram:hover{ background-color:#a57d60;}
.youtube:hover{ background-color:#be4f3a; }
Aplicamos una Pseudoelemento :hover para mostrar ciertos colores cuando se posicione el cursor sobre, de esta forma simula que su fondo es rellenado.
Muchos se preguntaran por que no cargue simplemente las imágenes al :hover directamente, la respuesta es que al cargar la imagen de forma PNG, junto con la otra (imagen rellenada)sera cargada hasta que el cursor sea pasado por elemento al menos 1 vez, ya que no sera visualizada de manera correcta, para evitar esto podemos únicamente modificar el color de fondo, esto nos ahorra el tener 2 imágenes de cada logo una sin fondo y otra con fondo, ademas de optimizar nuestro código y nos permite elegir los colores a nuestro gusto.
Con ello obtendremos algo como esto:
Por ultimo para hacerlo mas llamativo podemos agregar las siguientes lineas de código
a nuestro CSS
.steps{
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.facebook:hover , .twitter:hover, .instagram:hover, .youtube:hover{
-moz-transform: scale(1.05);
-webkit-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
}
Agregando estos atributos como, transition: all 200ms ease, el cual nos permite añadir tiempo a el efecto o cambio de atributos al ser pasado nuestro cursor, con ello se aprecia el efecto de transform: scale(1.05) el cual crea la forma de expandir nuestro icono de manera suave.
En esta imagen se puede apreciar el cambio que efectúa transform: escale
Para asignar los links a nuestras redes sociales aplicamos el uso de JQUERY y el siguiente codigo en nuestro header
<script type="text/javascript">
$('#facebook').on('click',function(){
window.open('http://www.facebook.com');
});
</script>
Pueden observar este plug dentro de esta dirección
Si tienen alguna duda favor de comentar. También es aplicable el uso de JQUERY y nuestras clases CSS3... Si te interesa como hacerlo mándame un inbox con gusto te ayudare...