22 novembro 2012

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

 

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.


2 comentários: