Valle Mustaqet -official-: 02 Efeitos com Listas

Hooy~

Sim, mais de uma postagem em um só dia ~~(evento raro aqui)~~! Vim aqui trazer um tutorial do efeito que eu uso no Gadget "VM", que é para ser o status do blog, ele pode ser usado como lista, ou como um menu.

Quando você passa o mouse: as palavras vão um pouco para a esquerda, a barra aumenta, e meio que a sombra das palavras aparece fazendo um efeito bem legal. Vim ensinar também um outro tipo de efeito, também com lista, todos dois tirados do Tumblr Great Help!, eu só mudei um pouco os códigos e os adaptei. Clique aqui para ver a preview dos efeitos.

1. Primeiramente, vá em "Editar HTML", aperte CTRL+F ou F3, e pesquise por '<head>'

Logo depois disso, cole:

<link href='http://fonts.googleapis.com/css?family=Ubuntu+Mono' rel='stylesheet' type='text/css'/>

Esse é o código da fonte personalizada.

2. Depois, procure por ']]></b:skin>'

Antes disso cole o seguinte código referente ao número do efeito que você quer:

Efeito 01:

.creu a{background: #fff; margin: 3px;padding: 3px;display: block;font-size: 9px;border-radius: 3px; text-transform:uppercase;font-size: 11px; font-family : 'Ubuntu Mono';-webkit-transition: all 0.8s ease-out; -moz-transition: all 0.8s ease-out; -o-transition: all 0.8s ease-out;box-shadow: 0px 28px 0px #b35ce5 inset; text-indent:10px; color:#fff;text-shadow: 1000px 0 1px #94d0cf; overflow:hidden;} .creu a:hover {color: #000; padding-left: 29px; padding-right: 11px; box-shadow: 0px 0px 0px #ffffff inset; text-shadow: 0px 0px 1px #3d1070;}

Explicando o Código:
O primeiro código em Negrito corresponde a cor do plano de fundo quando passa o mouse.
Onde está em Sublinhado, é a cor do plano de fundo normal, ou seja, sem o mouse.
Onde está em Itálico (os dois códigos) corresponde a cor das palavras.
E o último código em Negrito, é o código da cor da sombra das palavras quando passa o mouse.

Efeito 02:

.cru a{background: #f7f7f7; margin: 3px;padding: 3px;display: block;font-size: 9px;border-radius: 3px; text-transform:uppercase;font-size: 11px; font-family : 'Ubuntu Mono';-webkit-transition: all 0.8s ease-out; -moz-transition: all 0.8s ease-out; -o-transition: all 0.8s ease-out; text-indent:10px; color:#777;text-shadow: -1000px 0 1px #de4357; overflow:hidden; border-right:3px solid #9762d3;}
.cru a:hover {color: #000; padding-left: 29px; padding-right: 11px; text-shadow: 0px 0px 1px #672aac; border-right:11px solid #280154;}

Explicando o Código:

O primeiro código em Negrito corresponde a cor do plano de fundo normal.

O primeiro código em Sublinhado corresponde a cor da pequena borda do lado direito.

Onde está em Itálico (os dois códigos) corresponde a cor das palavras, tanto normal como hover.

O último código em Sublinhado é o código da cor da sombra das palavras no hover.

E o último código em Negrito, é o código da cor da borda no hover.

3. Por último, Adicione um Gadget (HTML/JavaScript) e cole o seguinte código:

Efeito 01:

<div class="creu"><a href="LINK">Escreva algo aqui</a><div class="creu"><a href="LINK">Escreva algo aqui</a><div class="creu"><a href="LINK">Escreva algo aqui</a><div class="creu"><a href="LINK">Escreva algo aqui</a><div class="creu"><a href="LINK">Escreva algo aqui</a><div class="creu"><a href="LINK">Escreva algo aqui</a><div class="creu"><a href="LINK">Escreva algo aqui</a><div class="creu"><a href="LINK">Escreva algo aqui</a>

Efeito 02:

<div class="cru"><a href="LINK">Escreva algo aqui</a><div class="cru"><a href="LINK">Escreva algo aqui</a><div class="cru"><a href="LINK">Escreva algo aqui</a><div class="cru"><a href="LINK">Escreva algo aqui</a><div class="cru"><a href="LINK">Escreva algo aqui</a><div class="cru"><a href="LINK">Escreva algo aqui</a><div class="cru"><a href="LINK">Escreva algo aqui</a>

P.S.: Se você não quiser o link, só troque o nome "LINK" por "/".

Páginas

25/11/2012

02 Efeitos com Listas

3 comentários: