Tutorial: Bordas em Hover na sidebar e nas postagens

Olá, estou feliz que tenham comentado na postagem anterior, obrigada... E continuem assim!
O tutorial de hoje é bem utilizado e fica super bem no blog!
Eu usei ele no MHR, são as bordinhas em Hover na sidebar e nas postagens,
 você passa o mouse e as bordinhas mudam de cor. Fica lindo!

Bordas na área das postagens
1- Vá em Editar HTML, Ctrl + F e procure por /* Posts agora abaixo daquele pontilhado gigante cole:
.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;
}

Entendendo o código:
As partes em negrito #000 devem ser mudadas para o código da cor que você queira. Os dois primeiros códigos assim (#000) são as bordas que ficam normais, e os outros dois são as bordas em hover.
As partes em vermelho 2px e 1px são as sombras, coloque 0 no lugar de um ou de dois se não quiser as sombras. Se você quiser as sombras mude o #000 do lado dos números 
de px por uma cor que você queira.

Bordas na área da sidebar
1- Vá em Editar HTML, Ctrl + F e procure por /* Widgets agora abaixo daquele pontilhado gigante cole:
.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 o código:
As partes em negrito #000 devem ser mudadas para o código da cor que você queira. Os dois primeiros códigos assim (#000) são as bordas que ficam normais, e os outros dois são as bordas em hover.
As partes em vermelho 2px e 1px são as sombras, coloque 0 no lugar de um ou de dois se não quiser as sombras. Se você quiser as sombras mude o #000 do lado dos números 
de px por uma cor que você queira.

Espero que tenham entendido galera! Qualquer dúvida comentem... 
Créditos pelo tutorial: One Dí Things
Beijo, Ráh

4 comentários:

  1. eu acho perfct esse tuto tenho no MHA tmb.

    ResponderExcluir
  2. Adorei *-*
    Este vou usar..Obrigada :3
    Beijos

    ResponderExcluir
  3. ráh vou usar,mais como deixo um pouco mais grossinho grande slá,igual ao da sua sidebar?

    ResponderExcluir