03 novembro 2012

Efeito CSS3 - Menu Grow


Oie gente bonita da blogsfera, trouxe duas novidades bem legais para vocês, a primeira é:
Trouxe um menu bem legal para vocês, que vocês podem visualiza-lo aqui.
A segunda é: Criei um blog com a ajuda do Léo Anders, do Warvely Place, só de avatares da Selena Gomez, entrem aqui, sempre estaremos atualizando, se algum Selenator estiver a disposição de postar lá é só comentar aqui.

Agora vamos ao tutorial:



Primeiro  procure por <head> cole o código abaixo em baixo da tag encontrada.
<link href='http://fonts.googleapis.com/css?family=Oregano' rel='stylesheet' type='text/css'/>

Agora aperte F3 ou CTRL+F e Procure por ]]</b:skin>.
 Logo acima cole o código abaixo:
#box {
background: url(http://static.tumblr.com/sxeyvs3/22ymcx558/banee.png) no-repeat;
display: block;
width: 970px;
height: 87px;
}
grow {
font-family: 'Oregano', cursive;
font-size: 30px;
display: inline-block;
color: #fff;
margin-top: 25px;
margin-left: 15px;
text-shadow: 0px 0px 3px #fff;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-ms-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}
grow:hover {
-moz-transform: scale(1.3) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-webkit-transform: scale(1.3) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-o-transform: scale(1.3) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-ms-transform: scale(1.3) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
transform: scale(1.3) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
text-shadow: 0px 0px 7px #fff;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-ms-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}

Altere onde está marcado, agora para usar é só adicionar um Gadget HTML/Jasvascript , com o código abaixo:

<center>
<div id="box">
<a href="LINK"><grow>Nome</grow></a>
<a href="LINK"><grow>Nome</grow></a>
<a href="LINK"><grow>Nome</grow></a>
<a href="LINK"><grow>Nome</grow></a>
<a href="LINK"><grow>Nome</grow></a>
<a href="LINK"><grow>Nome</grow></a>
</div>
</center>

7 comentários:

  1. Nossa esse menu é simples e lindo, adorei!

    overdosedeloucura.blogspot.com

    ResponderExcluir
  2. Adorei o menu super lindo.
    californiadreams2.blogspot.com.br

    ResponderExcluir
  3. Adorei *--* Simples, elegante, lindo >.< Haha'
    Beijos
    ill-helpyou.blogspot.com

    ResponderExcluir
  4. Que menu mais lindo *-* Adorei!!

    Explodindo Glitter

    ResponderExcluir
  5. *-* amo efeitos de zoom em menu, na verdade tenho uma paixão por css kkkkkkk
    Afiliação aceita,já está lá na elite, adorei seu blog, muito divo *-*

    ResponderExcluir
  6. Oi anjo, que blog maravilhoso, já estou seguindo ok? Se puder retribuir... Aceita afiliação com o meu blog? Beijinhos aguardo tua resposta lindona.

    japassoudotempo.blogspot.com

    By: Bruna

    ResponderExcluir
  7. Prontinho te coloquei na minha elite beijos!

    japassoudotempo.blogspot.com

    ResponderExcluir

Comente que eu retribuo!