Menu tooltip redes sociais animado com CSS3

Que tal usar um lindo menu tooltip redes sociais animado com CSS3

Olá leitores. Eu venho aqui para dar um presente ao seu blog, pelo tempo que estive ausente, trata-se de um menu 'sexy', que usa a técnica tooltip e será animado com CSS3. Você pode seu funcinamento aqui.

Siga o bloggermin no Twitter e no Google+, e fique por dentro das novidades para o seu blog. E curta também a nossa página no Facebook.




Adicionar menu ao blog.

A primeira coisa que devemos fazer é adicionar o HTML no blog. Entrando no Editar HTML do seu modelo, procure <body> ou <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> acrescentando dentro de <body> ou <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>, na seção onde você deseja ver o menu social.

Devem também substituir o # que está no href = "#" pelos links das contas sociais.
<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="tumblr" href="#" target="_blank"><span>Tumblr</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>

Adicionando estilos (CSS3):

É a vez de os estilos, em seguida, procure em seu modelo ]]></b:skin> e coloque o código CSS antes logo acima:

}
.nav-tt{
padding: 50;
width: 70%;
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/-4cFkVuK-J9o/UHxDNROuW2I/AAAAAAAAElY/abNRRK-8Qqc/s128/google_plus.png) no-repeat;
}
.nav-tt li .twitter{
background: url(https://lh4.googleusercontent.com/-wfBGqdU25u0/UHxDPNm_SgI/AAAAAAAAEl4/7k_oJBtjSJY/s128/twitter_1.png) no-repeat;
}
.nav-tt li .pinterest{
background: url(https://lh3.googleusercontent.com/-qyf8onE2vGQ/UHxDOOke6YI/AAAAAAAAElo/2fVKKCD2Kvw/s128/pinterest.png) no-repeat;
}
.nav-tt li .facebook{
background: url(https://lh6.googleusercontent.com/-MJZ3ppOsD3g/UHxDNlVHuxI/AAAAAAAAElg/k8f5b_DVM4E/s128/fb_1.png) no-repeat;
}
.nav-tt li .linkedin{
background: url(https://lh5.googleusercontent.com/-2-olf15YoqY/UHxDNzIdb1I/AAAAAAAAElk/5kHZeTBfdlA/s128/linkedin.png)no-repeat;
}
.nav-tt li .tumblr{
background: url(https://lh5.googleusercontent.com/-6rP4L0v2_68/UHxDO2hBAJI/AAAAAAAAEls/tm1r69EhCRw/s128/tumblr.png) no-repeat;
}
.nav-tt li .youtube{
background: url(https://lh5.googleusercontent.com/-X49px-YaEfY/UHxDPEPM7DI/AAAAAAAAEl0/230Z4oxHNzE/s128/you_tube.png) no-repeat;
}
.nav-tt li .mail{
background: url(https://lh4.googleusercontent.com/-Z4beVXz8HJI/UHxDNbnCR2I/AAAAAAAAElU/BfBkHDhqkd8/s32/email.png) no-repeat;
}
.nav-tt li .rss{
background: url(https://lh4.googleusercontent.com/-_EyfM2ruhco/UHxDOsct_rI/AAAAAAAAEl8/GuByt66SWxk/s128/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: 'Alegreya SC', Georgia, serif;
font-weight: 400;
font-style: italic;
font-size: 14px;
color: #719DAB;
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);
}

Opções

Apenas como exposto, obteremos a funcionalidade do menu social, mas discutiremos algumas opções, caso queira personalizar mais a seu gosto.

Adicionar ou remover o ícone e link.

Para adicionar ou remover marcadores, que só deve ir para HTML procurar class= "nav-tt", onde iremos encontrar o mesmo acima (o primeiro código).

Para adicionar um novo link, é preciso acrescentar antes </ul> e editar seus dados conforme descrito nos comentários no código:
<li><a class="nome-class" href="http://www.seulinkaqui.com" target="_blank"><span>Nome do link</span></a></li>
<!--class="nome-class" (Para reconhecê-lo altere para nome da class que está no CSS).-->

<!--href="http://www.seulinkaqui.com" (Você deve alterá-lo para o seu link).-->

<!--<span>Nome do link</span> (Nome para mostrar quando passar o mouse)-->
Então, devemos ir ao CSS do nosso modelo procurando ".nav-tt li a span"(sem aspas) e antes dela adicionar.
.nav-tt li .Nome-class-anterior{
/*Adicione o nome da class anterior chamada no HTML*/
background: url(Cole aqui o link de seu ícone) no-repeat;/*Link do ícono*/
}
Para remover somente deve fazer o oposto (apagar o link CSS e seu HTML).

efeitos:


Para alterar o tempo de como mostrar o tooltip somente procure ".nav-tt li a span" (sem aspas) e editar isto:
-webkit-transition: all 0.3s ease-in-out; /*-------------------------------*/
-moz-transition: all 0.3s ease-in-out;/*Alterar 0.3 pelo tempo que você*/
-o-transition: all 0.3s ease-in-out;/* Deseja, é mostrado em */
-ms-transition: all 0.3s ease-in-out;/* Segundos (0.3 segundos) */
transition: all 0.3s ease-in-out;/*------------------------------------*/
Exemplo com o tempo de 1 segundo

Para alterar a escala ou tamanho precisa editar isto:
-webkit-transform: scale(0);/*-------------------------------*/
-moz-transform: scale(0);/*Alterar (0)*/
-o-transform: scale(0);/* Pelo tamanho */
-ms-transform: scale(0);/* que queira */
transform: scale(0);/*------------------------------------*/
Exemplo escala de 10 com o tempo 0.5 segundos:



Bem caros leitores espero que gostem desse belo trabalho e espero que seja de utilidade em seus projetos e ações.

COMENTÁRIOS

Nome

Básicos,3,Blogger,43,Botões,2,buscadores,3,Comentários,5,Css3,9,Design,3,Dominio,3,Downloads,2,Efeito,13,Facebook,3,Feed,1,Festividades,1,GooglePlus,6,Hacks,7,HTML,8,Imagens,8,Menu,3,Recursos,3,Seo,8,Truque,24,Twitter,2,Widget - Gadget,16,
ltr
item
Bloggermin: Menu tooltip redes sociais animado com CSS3
Menu tooltip redes sociais animado com CSS3
Que tal usar um lindo menu tooltip redes sociais animado com CSS3
http://2.bp.blogspot.com/-xk2qDL6iN6U/UKqCQT9U7NI/AAAAAAAACqQ/qaEA0scs9Gg/s530/menu%2Bnav%2Btooltip1.png
http://2.bp.blogspot.com/-xk2qDL6iN6U/UKqCQT9U7NI/AAAAAAAACqQ/qaEA0scs9Gg/s72-c/menu%2Bnav%2Btooltip1.png
Bloggermin
https://www.bloggermin.cashmore.com.br/2012/11/menu-tooltip-redes-sociais-animado-css3.html
https://www.bloggermin.cashmore.com.br/
https://www.bloggermin.cashmore.com.br/
https://www.bloggermin.cashmore.com.br/2012/11/menu-tooltip-redes-sociais-animado-css3.html
true
3085171147808187471
UTF-8
Carregado Todas os Posts. Não foi encontrado nenhum post. VER TUDO Leia mais Responder Cancelar resposta Excluir Por Home PÁGINAS POSTAGENS Ver tudo RECOMENDADO PARA VOCÊ ETIQUETA ARQUIVO PESQUISAR TODAS AS PUBLICAÇÕES Não foi encontrado qualquer correspondência postal com o seu pedido Voltar a Home Domingo Segunda-feira Terça-feira Quarta-feira Quinta-feira Sexta-feira Sábado Dom Seg Ter Qua Qui Sex Sáb Janeiro Fevereiro Março Abril Maio Junho Julho Agosto Setembro Outubro Novembro Dezembro Jan Fev Mar Abr Maio Jun Jul Ago Set Out Nov Dez agora mesmo 1 minuto atrás $$1$$ minutes ago 1 hora atrás $$1$$ hours ago Ontem $$1$$ days ago $$1$$ weeks ago mais de 5 semanas atrás Seguidores Seguir O CONTEÚDO É PREMIUM Por favor, compartilhe para desbloquear Copiar Todo o Código Selecionar Todo o Código Todos os códigos foram copiados para a área de transferência Não é possível copiar os códigos / textos, por favor pressione [CTRL] + [C] (ou CMD + C com Mac) para copiar