02 maio 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 :)

@Way2themes

Follow Me