Tutorial: Bordas em hover nos gadgets e na postagem

(OMG *-*)

Potatoes!!!

E ae, suave na nave?? \o/

Deve até chover amanhã, "por que tia Nanda?" (tia Nanda?? kkkkk) porque eu tô ouvindo Little Mix - Stereo Soldier, é um embalinho maneraço... stereo stereo stereo soldier ooooh oooooh.... hahah' ta parei!

Bom, eu tava fazendo o lay da P9, que ta dando erro em simplesmente tudo, e isso frustante, e eu descobri esse efeito ou sei lá como chamar, e eu descobri mesmo, porque eu procurei tutoriais e não encontrei, aí fiz meus paranauê e consegui deixar as boradas da sidebar e da postagem em hover u.u

Pra quem não sabe é assim:

C'MON WITH ME!...

Primeiramente vamos colocar na párea de postagem!

Vá em Modelo > Editar HTML e procure por /* Posts e abaixo daquele pontilhado todo (------------*/) cole isso:

.post-outer {

background:#fff;

border-top: 2px solid #000;

border-bottom: 2px solid #000;

padding: 2px;

margin-top: 2px;

margin-bottom:20px;

box-shadow: 0 0 2px #000;

-webkit-transition-duration: .60s;

}

.post-outer:hover {

border-top: 2px solid #000;

border-bottom: 2px solid #000;

box-shadow: 0 0 1px #000;

-webkit-transition-duration: .60s;

}

Edite só o que está em negrito pra ficar mais fácil e não dar erro :D

Agora vamos para a sidebar!

Procure por /* Widgets e abaixo do pontilhadinho desse (---------------*/) cole isso:

.sidebar .widget {
background:#fff;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
padding: 5px;
margin-left: -30px;
margin-top: 0px;
margin-bottom:20px;
border-radius:0px;
box-shadow: 0 0 4px #000;
-webkit-transition-duration: .60s;
}
.sidebar .widget:hover {
border-top: 2px solid #000;
border-bottom: 2px solid #000;
box-shadow: 0 0 2px #000;
-webkit-transition-duration: .60s;
}

ENTENDENDO OS CÓDIGOS

Border-top - borda de cima
Border-bottom - borda de baixo
Box-shadow - sombreado das bordas

É isso aí, espero que ajude <3

Beijo na bunda (brinks!!) ! u.u

xXNandaXx

-------------------