Tutorial - Menu "Wishlist": Antigo menu das atualizações

 

Yoo!

Bom, antes de mudar o template eu havia postado o tutorial do menu que usava nas atualizações, aquele que ao passar o mouse a linha colorida mudava de cor e crescia, acho que lembram. Teve as confusões do tumblr e tudo mais e então apaguei. Percebi que ninguém teve que parar de postar as coisas de lá e eu não vou fazer isso também, foda-se. Até porque tá tudo creditado no about, né?

Estou repostando o tutorial, que por minha sorte, uma leitora reblogou e então não precisei refazer. Se os tumblrs resolverem choramingar, ignorem. Não vai dar em nada mesmo.

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>

Prontinho!