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

TABELA DE CORES AQUI

Créditos pelo tutorial: One Dí Things

Beijo, Ráh