02/05/2013

Sidebar hover


Hoje trago pra vocês um tutorial que eu aprendi ele lá no Crazy for html,
que eu já estou usando aqui no blog!
Este efeito, quando passamos o mouse ele muda as bordinhas de cor, 
 ou seja ele é hover. 
Vou ensinar vocês a fazer isso,
lembrando que o código foi retirado do Farry Teen
mas quem o criou foi Kawaii World. Veja a Preview aqui.

Vá no HTML do seu blog e procure por 
/* Widgets
Logo abaixo, terá alguns códigos. 
Você irá apagar eles até a primeira }. No lugar que você apagou, cole:

.sidebar .widget {
background: #ffffff; /* Fundo da sidebar */
box-shadow: inset 0 0 5px #e0dfdf, 0 0 4px #ccc; /* Sombra interna */
border-radius: 5px; /* Bordas arredondadas */
padding-bottom: 2px;
padding-left: 5px;
padding-right: 5px;
padding-top: 55px;
margin: 20px 0;
-webkit-transition-duration: .50s;
border-top: 6px solid #FFD700; /* Cor da borda de cima */
border-bottom: 6px solid #FFD700; /* Cor da borda de baixo */
}
.sidebar .widget:hover {
background: #ffffff; /* Cor da sidebar hover */
box-shadow: inset 0 0 30px #e4e2e2, 0 0 4px #ccc; /* Sombra interna hover */
border-top: 5px solid #FF82AB; /* Cor da borda de cima hover */
border-bottom: 5px solid #FF82AB; /* Cor da borda hover de baixo */
padding-bottom: 2px;
padding-left: 5px;
padding-right: 5px;
margin: 20px 0;
-webkit-transition-duration: .50s;
}
                                                          
                                                                   Se estiver tudo certo salve!

Nenhum comentário:

Postar um comentário

Olá Desvendadores!
Eu modero todos os comentários, porque gosto de ver que chegaram, e de retribuir. Comentem a vontade, mas seguindo essas regras:

• Seguindo , segue de volta ? - Eu aceito, mais fale alguma coisinha sobre o post, e também não minta pra mim, se você seguir, eu vou lá e retribuo.
• Não ofenda ou xingue as pessoas nos comentários
• Pode deixar o link do seu blog que eu retribuirei.

Seguindo essas regras, podem comentar o quanto quiser :)

Desenvolvimento por: Mariely Abreu | Todos os direitos reservados ©. voltar ao topo