Tutoriais

Oi gente! Tudo bem? Bom trouxe alguns tutos para vocês e um presente para Lu.

Esse tutos eu ví no Kawaii World.

Menu Giratório 

 

O primeiro é a visualização normal do menu e o segundo ao passar o mouse.
A transição não é direta, o menu gira antes de passar para a outra "fase".

1. Em editar HTML, procure por ]]></b:skin> e acima do código, cole:

Visualize o código clicando aqui.

2. Depois de personalizar como desejar, cole o seguinte código em um gadget de HTML/JavaScript:

<a href="SEULINK.COM"><div id="menu" onmouseover="this.innerHTML='NOMECOMMOUSE'"onmouseout="this.innerHTML='SEMMOUSE'">SEMMOUSE</div></a> <br />

Não tem muito o que explicar.

Em seulink.com, cole a url do que quiser.
Nome com mouse: Cole o que vai aparecer quando passarem o mouse na bolinha.
Sem mouse: é o que aparece normalmente.

Vamos jogar?

Borda com Imagem

 

1. Vá até http://border-image.com

2. Prepare a sua própria imagem de borda, lembre-se que ela deve ser "contínua". Usei esta aqui. Carregue ela na barra "Image" do site.

3. Agora é só mudar como desejar. Para fazer só a borda em cima, deixe "Bottom Offset" em zero e para fazer só a borda de baixo, deixe "Top Offset" em zero.

4. Copie o código que se encontra na área de Preview e cole onde deseja usar.

Outros tutoriais úteis: Bordas na área de postagem || Bordas nos gadgets
Troque as outras bordas do tutorial por essa que você fez.

Bordas nos Gadgets

 

1. Vá até editar HTML, procure por .sidebar .widget { e abaixo do código, cole:

border-bottom: 10px solid #d4d4d4;

- Entenda totalmente o código:

Bottom - Faz com que a borda seja no fim de cada gadget. Você pode mudar para top (topo), left (esquerda) ou right (direita).

10px - Aumente ou diminua para regular o tamanho da borda.

Solid - É o tipo de borda, veja todos os tipos aqui.

#d4d4d4 - A cor da sua borda, mude para a que desejar.

E pronto! Agora é só salvar.

Borda colorida e em hover na imagem 

 1. Vá até editar HTML e procure por ]]></b:skin>. Acima dessa tag, cole:

.main img {
border: 3px solid  #f17c9d;
-webkit-transition-duration: .50s;
}
.main img:hover {
border: 3px solid #c8a2d4;
-webkit-transition-duration: .50s;
}

O código é bem simples: 3px refere-se ao tamanho, solid ao tipo de borda e #f17c9d ao código da cor. É só trocar pelo que preferir. A primeira parte do código é o que aparece sem passar o mouse e a segunda com o mouse sobre a imagem (hover). Edite como desejar e depois salve.

Menu "Wishlist"

 

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>

 Pronto.

 Agora o presente da minha amigona!

Espero que goste! ;)

 Gostou Lu?
Beijos.