Borda pressionada HTML

Yo minna,ah quanto tempo né?

Eu sei que sumi,mas foi porque eu tava desanimada,eu até pensei em desisti do meu próprio blog,então já viram como esta a situação né?

Bem,hoje eu vim com um tuto,bem simples,que eu achei fantástico,são as famosas bordas pressionadas.

Sim,achavam que só dava para faze-las no PS,né?Que nada é super fácil fazer por HTML também.

Bem eu tava andando por uns blogs ai,o Breaking Doubts,e vi que o footer da postagem era com bordas pressionadas,e logo fui eu perguntar como ela tinha feito,e ela não sabia,era um lay Free T^T

Mas não desisti,entrei num layout velho meu,preguiça de fazer uma lay de teste,um dia eu faço,entrei no layout da Saya de HOTD,e teste vários códigos no footer,e achei a técnica para faze-lo.Vamos lá?

Bem,é bem simples,para fazer bordas pressionada basta colocar esse código aqui

border-top: 1px solid #troquepelacormaisescuradoqueofundo ;border-left: 1px solid #troquepelacormaisescuradoqueofundo; border-bottom: 1px solid #fff;border-right:1px solid #fff;

Antes do } de qualquer código,e só mude o "#troquepelacormaisescuradoqueofundo".Bem fácil né?

Mas to vendo que gente não ta entendendo aonde colocar o código.Bem vamos supor que o código é esse:

.post-footer { background: #FFF0F5;font-family: 'Muli', sans-serif;  font-size: 13px;  margin-top:35px; padding:3px; text-transform:none; oorder-radius: 4px;text-align:center; }

Basta você colocar o código antes de fechar o },ai fica assim:

.post-footer { background: #FFF0F5;font-family: 'Muli', sans-serif;  font-size: 13px;  margin-top:35px; padding:3px; text-transform:none; oorder-radius: 4px;text-align:center; border-top: 1px solid #FFE4E1 ;border-left: 1px solid #FFE4E1;border-bottom: 1px solid #fff;border-right: 1px solid #fff;}

Querem ver como fica?

Bem o footer vocês podem ver aqui

E eu vou dar um exemplo de imagem aqui.Ai é só descer no gadget "borda pressionada"

Eai,fácil né?

E muito legal.Bem,por hoje eu acho que mais tarde eu volto com mais um efeito keyframe,e depois é só.

Bye~~