Divisor

Éste sitio web usa cookies, puedes ver la política de cookies, Aquí. ⤵ ⤵


Iconos de Redes Sociales con Tooltips Circulares



Tooltip Circular CSS3


Seguimos con los tooltips de las entradas anteriores, pero ésta vez, veremos el tooltip o la burbuja con la descripción emergente de forma circular, de diferente forma a la vista, a los precedentes visualizados, aludidos anteriormente. Estos ejemplos están basados y re-diseñados con la ayuda de los tutoriales de la web Tympanus o Codrops, asentándose en ellos. A continuación podrás ver la demostración del tooltip circular, pasando el cursor por encima del botón de la red social elegida, espero que os gusten, enjoy this tooltips!





Botones sociales con Tooltip Circular











Ahora añadiremos estos fantásticos botones en Blogger!



  1. Entra en Blogger.
  2. Y ahora ves a Plantilla & Editar HTML.
  3. Copia y pega los siguientes CSS.
  4. Una vez copiado el CSS, busca con Ctrl+F la etiqueta ]]></b:skin>:
  5. Y antes de dicha etiqueta añade los siguientes estilos.



.nav-tt{
 padding: 50;
 width: 450px;
 height: 70px;
 margin: 80px auto 30px auto;

}
.nav-tt li{
 float: left;
 list-style: none;
}
.nav-tt li a{
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 2px;
    outline: none;
 position: relative;
 z-index: 2;
    text-indent: -9000px;
    text-decoration: none;
}
.nav-tt li .gplus{ 
background: url(https://lh4.googleusercontent.com/-12UK5a2iZ2A/U5Y4ByZSPwI/AAAAAAAAUfE/pNVhor-4Op0/s32/1402371617_google_plus.png) no-repeat;}
.nav-tt li .twitter {
background: url(https://lh5.googleusercontent.com/-cUdQHbpsbkI/U5Y6_oEMYRI/AAAAAAAAUfY/kGfAN7zGXzI/s32/1402371604_bird_twitter.png) no-repeat;}
.nav-tt li .pinterest{
background: url(https://lh4.googleusercontent.com/-MvJph7MhiIE/U5Y7eB-Ry0I/AAAAAAAAUfw/yxZF-xtt1dM/s32/1402372534_pinterest.png) no-repeat;}
.nav-tt li .facebook{
background: url(https://lh6.googleusercontent.com/-vkinJ6khaJo/U5Y7NxAsZ1I/AAAAAAAAUfk/5_2so-NyXwE/s32/1402371594_facebook_fb_social_social_media.png) no-repeat;}
.nav-tt li .linkedin{
background: url(https://lh6.googleusercontent.com/-1-dxGPKNbqU/U5Y9PW_WYqI/AAAAAAAAUgM/62U2K_o7Ubk/s32/1402372984_linkedin.png)no-repeat;}
.nav-tt li .instagram{
background: url(https://lh6.googleusercontent.com/-2InMRg46DCo/U5Y-646oNaI/AAAAAAAAUhA/y3mQ4fIfPmA/s32/1402373375_instagram.png) no-repeat;}
.nav-tt li .youtube{
background: url(https://lh5.googleusercontent.com/-jk3XhEWW1I4/U5Y-TfUJFQI/AAAAAAAAUgw/ysLcGcyAuZA/s32/1402373260_youtube_you_tube_google.png) no-repeat;}
.nav-tt li .mail{
background: url(https://lh5.googleusercontent.com/-wSbxvTQvRwA/U5Y9zLjOWcI/AAAAAAAAUgY/Idgw_JD5yCY/s32/1402373132_gmail_mail.png) no-repeat;}
.nav-tt li .rss{
background: url(https://lh3.googleusercontent.com/-ukYHUISNuZs/U5Y-DvrOy4I/AAAAAAAAUgk/zXi3Yfh7_OE/s32/1402372026_rss.png) no-repeat;}
.nav-tt li a span{
 width: 80px;
 height: 80px;
 line-height: 80px;
 padding: 10px;
 left: 50%;
 margin-left: -60px;
 font-family: Georgia, serif;
 font-weight: 400; 
 font-style: italic;
 font-size: 14px;
 color: #000;
 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
 text-align: center;
 border: 5px solid #ffffff;
 background: rgba(255,255,255,0.5);
 text-indent: 0px;
 position: absolute;
 pointer-events: none;
 border-radius: 50%;
 bottom: -40px;
 opacity: 0;
 box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
 -webkit-transform: scale(0);
 -moz-transform: scale(0);
 -o-transform: scale(0);
 -ms-transform: scale(0);
 transform: scale(0);
 -webkit-transition: all 0.3s ease-in-out;
 -moz-transition: all 0.3s ease-in-out;
 -o-transition: all 0.3s ease-in-out;
 -ms-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;

}
.nav-tt li a span:before,
.nav-tt li a span:after{
 content: '';
 position: absolute;
 bottom: -15px;
 left: 50%;
 margin-left: -9px;
 width: 0;
 height: 0;
 border-left: 10px solid transparent;
 border-right: 10px solid transparent;
 border-top: 11px solid rgba(0,0,0,0.1);
}
.nav-tt li a span:after{
 bottom: -13px;
 margin-left: -10px;
 border-top: 10px solid #ffffff;
}
.nav-tt li a:hover span{
 opacity: 0.9;
 bottom: 50px;
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -o-transform: scale(1);
 -ms-transform: scale(1);
 transform: scale(1);
}



Ahora añadiremos el HTML de los botones con Tooltips!



  1. Estando en plantilla; busca con Ctrl+F la etiqueta </body>.
  2. Una vez encontrada dicha etiqueta, añades el HTML antes de </body>
  3. También el HTML, lo puedes colocar entrando en Diseño and HTML/JAVASCRIPT.
  4. Recuerda que debes de remplazar todas la "#" por las URL de tu red social.



<ul class="nav-tt">
<li><a class="twitter" href="#" target="_blank"><span>Twitter</span></a></li>
<li><a class="gplus" href="#" target="_blank"><span>Google Plus</span></a></li>
<li><a class="facebook" href="#" target="_blank"><span>Facebook</span></a></li>
<li><a class="linkedin" href="#" target="_blank"><span>LinkedIn</span></a></li>
<li><a class="instagram" href="#" target="_blank"><span>Instagram</span></a></li>
<li><a class="pinterest" href="#" target="_blank"><span>Pinterest</span></a></li>
<li><a class="youtube" href="#" target="_blank"><span>Youtube</span></a></li>
<li><a class="mail" href="#" target="_blank"><span>Mail</span></a></li>
<li><a class="rss" href="#" target="_blank"><span>RSS</span></a></li>
</ul>





Aizum Blog, martes, junio 10, 2014


Divisor Star

✏ Buscador!

En las redes ⤵

✏ Vídeos!

 

Publicidad!

Subir hacia arriba ▲ Modificated & Designed by Iván Dangerfield © 2014. Converted by Bloggertheme9