Home
Tutoriais
Efeitos
Ilustrações
Menus
Psds
Vagas
F.A.Q
Mapa
Layout free

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
-------------------

2 comentários:

  1. Omg esse blog já está nos meus favoritos sempre salvando minha vida *u* bjos

    h-piece.blogspot.com.br

    ResponderExcluir