Menu - Sky Pink


Estou novamente sem photoshop, por isso hoje trago um tutorial de um menu que eu mesma fiz. O menu se chama Sky Pink, preview aqui. Ele é bonito para quem tem um layout simples e quer dar uma modernizada.Vamos ver o tuto?


Procure ]]></b:skin> no seu HTML , logo acima cole o código abaixo:
/* MENU SKY PINK BY Ana Paula */
SKYPINK{
COLOR: #737373; /* COR DA FONTE QUANDO PASSA O MOUSE */
TEXT-ALIGN:CENTER;
FONT-SIZE: 11PX; /* TAMANHO DA FONTE DO MENU */
BACKGROUND: #BEEBFA ; /* FUNDO DO MENU */
PADDING: 2PX;
FLOAT: LEFT;
MARGIN: 2PX;
WIDTH: 44%; /* TAMANHO DO MENU */
-WEBKIT-BORDER-BOTTOM-RIGHT-RADIUS: 10PX;
-MOZ-BORDER-RADIUS-TOPRIGHT: 10PX;
-MOZ-BORDER-RADIUS-BOTTOMRIGHT: 10PX;
BORDER-TOP-RIGHT-RADIUS: 10PX;
BORDER-BOTTOM-RIGHT-RADIUS: 10PX;
BORDER-TOP-RIGHT-RADIUS: 0;
-MOZ-BOX-SHADOW: INSET 4PX 0 0PX 0 #A09AA3;
-WEBKIT-BOX-SHADOW: INSET 3PX 0 0PX 0 #FE79AB;
BOX-SHADOW: INSET 5PX 0 0PX 0 #EE79B6;
PADDING: 3PX 3PX 3PX 6PX;
-MOZ-TRANSITION: ALL 0.4S EASE-OUT;
-WEBKIT-TRANSITION: ALL 0.8S EASE-OUT;
-O-TRANSITION: ALL 0.8S EASE-OUT;
-MS-TRANSITION: ALL 0.8S EASE-OUT;
TRANSITION: ALL 0.8S EASE-OUT;}
SKYPINK:HOVER{
BACKGROUND:#D682DE; /* FUNDO DO MENU QUANDO PASSA O MOUSE */
COLOR: #FFF; /* COR DA FONTE QUANDO PASSA O MOUSE */
BORDER-RADIUS: 0PX;
-MOZ-BOX-SHADOW: INSET 550PX 0 0PX 0 #93E0FA;
-WEBKIT-BOX-SHADOW: INSET 550PX 0 0PX 0 #93E0FA;
BOX-SHADOW: INSET 550PX 0 0PX 0 #93E0FA;
COLOR: #818181;}
Para o menu funcionar, use o código abaixo em um gadget java/script.Substitua URL e NOME.
<A HREF="URL1"><SKYPINK>NOME 1</SKYPINK></A></DIV>
<A HREF="URL2"><SKYPINK>NOME 2</SKYPINK></A><BR />
<A HREF="URL3"><SKYPINK>NOME 3</SKYPINK></A><BR />
<A HREF="URL4"><SKYPINK>NOME 4</SKYPINK></A></DIV>
 Fez tudo? Se não der certo, tente de novo ^^  Espero que tenham gostado gente, beijos, Ana

10 comentários:

  1. Que lindoooooooo! Awnt

    Beijos,
    Sim Senhorita (Clique no perfil)

    ResponderExcluir
  2. Leu meus pensamentos, foi? Tava procurando um menu ASSIM! BJuus

    http://manual-girls.blogspot.com.br/

    ResponderExcluir
  3. Que menu mais lindo! Amo a combinação de rosa e azul, sempre achei meio lolita, sabe? Acho simplesmente adorável. Vou favoritar pra usar um dia *o*
    Se puder, passa no meu blog? Tem sorteio de um par de brincos e um colar do Super Mario!
    Beijos!

    myacidblackcherry.blogspot.com

    ResponderExcluir
  4. Que lindo, to passando o mouse dele aqui UHSHSAHUSHUA 'retardada'.

    - Wonderland Cherry.

    ResponderExcluir
  5. KK que efeito show, da vontade de ficar passando o mouse um monte de vezes ~~ le eu dando uma de drogada ~~
    bezzo, sarah
    http://svt-pistache.blogspot.com.br/

    ResponderExcluir
  6. Vish' Sem PS?! Boa Sorte o/

    Lindinho o menu, adorei o efeito *-*

    ResponderExcluir
  7. Lindoos *-*
    O seu blog tá lindo >.<
    Enfim, estou seguido !

    Segue?
    garotasmalvadask.blogspot.com.br

    Se inscreve?
    www.youtube.com.br/juuliamallet

    ResponderExcluir

Obrigada pelo seu comentário, sua opinião é muito importante!
Se seu perfil for trancado, não se esqueça de deixar o link do seu blog ou pelo menos o nome, para que eu possa retribuir. ♥

« » +