Tutorial: Sidebar com Bordas Hover

Oláá pessoal!

Tudo bom?

Bem, hoje eu trouxe um tutorial de como deixar as bordas da sidebar hover. Hoje é dia de bases ou buttons, mas não consegui segurar até segunda pra postar... Vocês podem ver como fica passando o mouse na sidebar alí no lado>> 

É o mesmo efeito lá do Kawaii World. Eu aprendi esse tutorial lá no Farry Teen. Mas a dona excluíu o blog. Que pena, pois eu adorava o blog. Tinha tutoriais muito bons. Bem, se vocês gostaram, e querem deixar o blog de vocês mais fofinho, usem esse tutorial, mas claro, não vale fazer igualzinho a sidebar aqui do blog, e a sidebar do Kawaii World.

Vamos ver??

Bom, procure por 

/* Widgets

Agora, em baixo dessa linhazinha aqui: 

----------------------------------------------- */

cole:

.sidebar .widget {

background: #ffffff; /* Fundo da sidebar */

box-shadow: inset 0 0 5px #e0dfdf, 0 0 4px #ccc; /* Sombra interna */

-webkit-transition-duration: .50s;

border-top: 6px solid #XXX; /* Cor da borda de cima */

border-bottom: 6px solid #XXX; /* 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 #XXX; /* Cor da borda de cima hover */

border-bottom: 5px solid #XXX; /* Cor da borda hover de baixo */

-webkit-transition-duration: .50s;

} 

Gostaram??

Bem, que eu tenha visto, não tem nenhum blog que tem esse tutorial. 

Utilize a vontade!!

Beijos,

~Pâm