Redes Sociales

Invert Social, iconos sociales con colores invertidos al pasar el cursor

"Invert Social" es el nombre del efecto que le dí a unos iconos sociales. Los colores de cada red social son normales hasta que pasamos el cursor por encima, que es cuando toma el efecto de colores invertidos y se transforma de cuadrado a circulo.

Un efecto bastante simple, pero no por eso deja de verse hermoso. Puedes ver la demostración desde aquí mismo:
¿Te gusta? ¿Qué tal si lo añadimos a tu blog?.

Para hacerlo, nos dirigimos a Plantilla→Editar HTML, presionamos CTRL+F y buscamos <head> y justo debajo de este, pegamos lo siguiente:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
El anterior código, es el que contiene no solo los iconos sociales, también una infinidad de iconos de todo tipo, desde Font Awesome, busca y agrega los iconos que deseas.

Ahora, añadiremos todo de uno solo, es decir, el CSS y el HTML de los iconos en un solo código. Para ello nos vamos a Diseño→Añadir Gadget→HTML/Javascript y pegamos:
<ul class="invertsoc">
<li>
  <a href="URLFacebook"><span class="fa fa-facebook"></span></a></li>
<li>
  <a href="URLTwitter"><span class="fa fa-twitter"></span></a></li>
<li>
  <a href="URLGoogle"><span class="fa fa-google-plus"></span></a></li>
 <li>
   <a href="URLYoutube"><span class="fa fa-youtube"></span></a></li>
<li>
   <a href="URLLinkedIn"><span class="fa fa-linkedin"></span></a></li>
</ul>
<style type='text/css'>
.inversoc{
  display:inline-block;
  z-index:10000;
}
.invertsoc li{
  display:inline-block;
  margin:2px;
}
.fa-facebook, .fa-twitter, .fa-google-plus, .fa-youtube, .fa-linkedin{
 -webkit-transition: all 0.5s linear;
 -moz-transition: all 0.5s linear;
 -o-transition: all 0.5s linear;
 -ms-transition: all 0.5s linear;
 transition:0.5s;
 font-size: 20px;
 color: #fff;
 padding: 8px;
 text-align:center;
 width:20px;
 height:20px;
}
.fa-facebook{
 background:#3A589B;
 border:2px solid #3A589B;
}
.fa-facebook:hover{
  background:#fff;
  color:#3A589B;
  border-radius:50%;
}
.fa-twitter{
  background:#598DCA;
  border:2px solid #598DCA;
}
.fa-twitter:hover{
  background:#fff;
  color:#598DCA;
  border-radius:50%;
}
.fa-google-plus{
  background:#E02F2F;
  border:2px solid #E02F2F;
}
.fa-google-plus:hover{
  background:#fff;
  color:#E02F2F;
  border-radius:50%;
}
.fa-youtube{
  background:#CF3427;
  border:2px solid #CF3427;
}
.fa-youtube:hover{
  background:#fff;
  color:#CF3427;
  border-radius:50%;
}
.fa-linkedin{
  background:#007BB5;
  border:2px solid #007BB5;
}
.fa-linkedin:hover{
  background:#fff;
  color:#007BB5;
  border-radius:50%;
}
</style>
Tan solo reemplazar lo que está resaltado por lo que indica para guardar los cambios y terminar.

Espero que este post haya sido de tu agrado, hasta el siguiente tutorial ;)

About Unknown

0 comentarios:

Publicar un comentario

Con la tecnología de Blogger.