Seja bem vindo(a) ao Sugoi tutoriais =)
Temos temas para blogger, wordpress e outros!
Acompanhe nosso blog pela FANPAGE!
Peça o seu tutorial aqui!

2/22/2013

Bordas Coloridas da Área de Post e Sidebar com efeito Hover


Bom postei anteriormente como colocar bordas coloridas na área de post e na sidebar. Agora irei ensinar a como colocar o efeito hover nessas bordas.

Antes de tudo estejam cientes que esta é a continuação do tutorial citado acima, ou seja, terá que ter seguido-o para este tutorial dar certo. 
Vejam abaixo o resultado:

Área de post
(clique na imagem para amplia-la)
Sidebar
(clique na imagem para amplia-la)

Gostaram?...Então vamos começar...

Área de post

1. Aperte 'F3' e procure por '/* PERSONALIZAÇÃO DA ÁREA DE POST */'
2. Acima de '/* PERSONALIZAÇÃO DA ÁREA DE POST */' cole o código abaixo
.post-outer:hover {
border-top: 5px solid #000; /*cor da borda de cima*/
border-bottom: 5px solid #000; /*cor da borda de baixo*/
-webkit-transition-duration: .90s; /*duração do hover*/
}

Onde está destacado em negrito é as cores das bordas. Pode altera-las colocando a cor em HTML da cor desejada.

Sidebar

1. Aperte 'F3' e procure por esta palavra '/*BORDA DA SIDEBAR*/'
2. Cole o código abaixo logo acima de '/*BORDA DA SIDEBAR*/'
.sidebar .widget:hover {
border-top: 5px solid #000; /*cor da borda de cima*/
border-bottom: 5px solid #000; /*cor da borda de baixo*/
-webkit-transition-duration: .90s; /*duração do hover*/
}
Onde está destacado em negrito é as cores das bordas. Pode altera-las colocando a cor em HTML da cor desejada.

É somente isto. Espero que tenham gostado e aprendido!

Tutorial feito exclusivamente ao Sugoi Tutoriais. Caso reblogue, de os devidos créditos.

Nenhum comentário:

Postar um comentário

Seja educado , nossa educação depende da sua.
Criticas e sugestões são bem vindos.
Se reblogar por favor nos avise.