Menu Shade

836_large
     Olá bebês :3 Hoje não estava conseguindo dormir e então passei parte da madrugada acordada. Como ainda não tinha preparado nenhum post para cá, resolvi criar algo para primeiro tutorial do blog. Enfim, criei um menu hover com o efeito shadow, espero que gostem e se usar credite !
Preview aqui 
1. Vá até o seu HTML e procure por <head>. Acima dessa tag cole o seguinte código:
<link href='http://fonts.googleapis.com/css?family=Iceland' rel='stylesheet' type='text/css'/>

2. Agora procure por ]]></b:skin> e quando achar cole o seguinte código acima dessa tag:

#shade {
font-family: 'Iceland';
font-size: 40px; /*Tamanho da Fonte, fique à vontade para mudá-lo*/
width: 100%;
text-align: center;
margin: 20px 0;
}
#shade:first-of-type {
margin: 5px 0;
}
 #shade a {
text-decoration: none;
font-weight: bold;
color: #ffffff; /*Cor da Fonte*/
text-shadow: 1px 1px 3px #b5b5b5;
-moz-text-shadow: 1px 1px 3px #b5b5b5;
-webkit-text-shadow: 1px 1px 3px #b5b5b5;
position: relative; top: 0;
 -webkit-transition: all 0.1s ease-in;
 -moz-transition: top 0.1s ease-in, text-shadow 0.1s ease-in;
-ms-transition: top 0.1s ease-in, text-shadow 0.1s ease-in;
}
#shade a:hover {
text-shadow: 5px 5px 7px #b5b5b5;
-moz-text-shadow: 5px 5px 7px #b5b5b5;
-webkit-text-shadow: 5px 5px 7px #b5b5b5;
left: -5px; top: -12px; }

Depois é só salvar 

6 comentários:

  1. iii, por esses dias tbm nem tenho conseguido dormir direito tbm, muito calor né?!

    amei o menu que você criou, muito lindo, eu usaria com certeza!
    Amei seu blog, valeu pela visitinha lá no A.N

    Adolescente Nerd

    ResponderExcluir
  2. super lindo o menu , adorei :)


    http://evelynrestyles.blogspot.com.br/

    ResponderExcluir
  3. Que lindo,tá nos meus favoritos vai que um dia eu uso?

    Bom tu me pediu lá um tuto de como eu deixei a area da postagem transparente bom eu fiz uma enquete lá vota ai se os tutoriais de blog ganha eu faço o tuto

    #Bezoos~~> Kashmeres.blogspot.com

    ResponderExcluir
  4. Gostei,bem bonito.
    http://minha-vida-em.blogspot.com.br/

    ResponderExcluir
  5. Menu lindo, talvez use pro próximo layout ;3

    our-wings-official

    ResponderExcluir