Sidebar hover
03:54
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!
0 Comments
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 :)