21 de fev de 2013

Tutoriais: Tutorial Menu Wishlist




Hooy Modern's Girls  Hoje vamos aprender o Menu Wishlist
Se quiser continuar vendo o tuto,clique em (mais informações)


Para ver o preview (clica aqui)

Vamos aprender:
 Vá no seu HTML e procure por :

]]></b:skin>


Acima do código ]]></b:skin> cole o código abaixo:



.atub{

background: #F9F9F9;  /*Cor do fundo*/

font-family: century gothic;  /*Fonte*/ 

font-size: 11px;  /*Tamanho da fonte*/ 

margin: 2px;

color: #000;  /*Cor da fonte*/ 

display: block;

-moz-box-shadow: inset 5px 0 0px 0 #FFB3B3;  /*Cor da barrinha do lado*/ 

-webkit-box-shadow: inset 5px 0 0px 0 #FFB3B3;  /*Cor da barrinha do lado*/  

box-shadow: inset 3px 0 0px 0 #FFB3B3;   /*Cor da 

barrinha do lado*/  

padding: 3px 3px 3px 6px;

-moz-transition: all 1.1s ease-out;   /*Tempo*/  

-webkit-transition: all 1.1s ease-out;  /*Tempo*/ 

-o-transition: all 1.1s ease-out;  /*Tempo*/ 

-ms-transition: all 1.1s ease-out;  /*Tempo*/ 

transition: all 1.1s ease-out;}  /*Tempo*/ 

.atub:hover

{color: #fff;

-moz-box-shadow: inset 550px 0 0px 0 #FF7676;  /*Cor do fundo a hover*/ 

-webkit-box-shadow: inset 550px 0 0px 0 #FF7676;  /*Cor do fundo a hover*/  

box-shadow: inset 550px 0 0px 0 #FF7676;  /*Cor do fundo a hover*/  

color: #000;} /*Cor da fonte a hover*/  


Modifique onde está as dicas,e salve. 

Agora vá em um HTML/JAVA SCRPIT e cole o código abaixo:

<div class="atub">SEU TEXTO AQUI</div>


Escreva onde se pede,e repita quantas vezes quiser,para ficar assim:

Kisses <3

Nenhum comentário:

Postar um comentário

Seja Educado
Comente sua opinião
Qualquer erro,reclame
Comente e seja feliz <3