Sidebar hover

Hoje trago para 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!

Postar um comentário

0 Comentários