1 de out de 2012

tutorial - menu wishlisttu


Oie :3

Já que eu não consegui preparar quase nada pra postar, vou postar tutoriais do Kawaii World u3u espero que gostem, bem, vamos lá ~

O menu é bem fofinho, quando passa o mouse, a linha muda de cor e cresce, é um bom tutorial pra um blog fofinho ou com cores pastéis, combina bastante, acho.


1. Procure por ]]></b:skin> e antes da tag, cole:

.midnight{background: #dfdbdb;font-family: trebuchet ms;font-size: 11px;margin: 2px;color: #000;display: block;-moz-box-shadow: inset 4px 0 0px 0 #a09aa3;-webkit-box-shadow: inset 3px 0 0px 0 #fe79ab;box-shadow: inset 3px 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;}.midnight:hover{-moz-box-shadow: inset 550px 0 0px 0 #d5e0c6;-webkit-box-shadow: inset 550px 0 0px 0 #f192ba;box-shadow: inset 550px 0 0px 0 #d5e0c6;color: #818181;}


~ Entendendo o código:


background: #dfdbdb; - Cor do seu fundo inicial.
font-family: trebuchet ms; - Fonte.
font-size: 11px; - Tamanho da fonte.
margin: 2px; - Espaço entre cada linha do menu. 
color: #000; - Cor da fonte.
box-shadow: inset 3px 0 0px 0 #ee79b6; - Cor da linha quando menor.
E o resto você vê quando for trocando.



2. Para usar, vá em um gadget de HTML/JavaScript e cole:

<div class="midnight"> Seu texto </div>



6 comentários:

  1. oi passei aqui pra falar que o nome do blog menina estranha mudou agora é cantinho da Bru muda lá nos afiliados.

    ResponderExcluir
  2. Eu Já Conhecia Esse Tutorial Mas Mesmo Assim Acho Ele Muito Fofo Mesmo >_<
    Aceita Afiliação ?

    Hyumi-Kwon.Blogspot.Com

    ResponderExcluir
  3. Nossa eu amei o efeito *---* fica lindo
    adorei o seu blog e já estou seguindo aqui, beijos!!!

    --> #Inside a Dream (é só clicar no meu perfil)

    ResponderExcluir
  4. Já conhecia o tutorial >.<
    Flor, seu blog é tão lindo, mas o titulo das postagens meio que atrapalha sabe? Se mudasse ia ficar muito mais lindo!
    É só uma dica! Beijos
    http://girluntamed-official.blogspot.com.br/

    ResponderExcluir