Bordas da Sidebar em Hover

Bom dia pessoal ^-^

Tudo bem? O tutorial de hoje é bem útil, sabe aquelas bordinhas que ficam embaixo e em cima da sidebar? Pronto, esse tutorial é pra deixa-las em hover, oque fica uma gracinha :3

Os créditos vão ao Farry Teen, mas ele foi excluido, e enfim.

E o melhor, hoje nem tive aula õ/ , o motivo é que teve uma coisa aí com os professores, aquelas reuniões e tals, daí nem teve aula, hihi.

Vamos lá ^u^

Vá no seu HTML, e dê um Ctrl + F , e procure por:

/* Widgets

Agora, em baixo dessa linha,

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

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;

}

E é isso, aí vocês modificam ao gosto de vocês. Já tá tudo explicadinho.

Kissus, amo vocês <3