Como separar e colocar bordas coloridas nos posts


Olá Pessoal!
Dessa vez trago a vocês um tutorial de duas coisas que fazem muita diferença no layout, que é separar os post e colocar a bordinha colorida. Clique em leia Mais e veja







Como colocar os dois juntos?

. Para separar os posts e já colocar as bordinhas procure por: .main-inner .column-center-outer {
Vai estar assim:

.main-inner .column-center-outer {
  background: $(post.background.color) $(post.background.url) repeat scroll top left;
  _background-image: none;
}

.Agora apague todo o código e no lugar cole:

.post-outer {margin: 4px 2px 10px;background: #fff;padding: 20px 10px;box-shadow: inset 0 0 30px #COR DA SOMBRA, 0 0 4px #ccc;border-width: 29px 1px 0px 0px;border-top: 5px solid #COR DA BORDA DE CIMA;border-bottom: 5px solid #COR DA BORDA DE BAIXO;}
Agora coloque as cores, aonde está escrito. Aqui tem a tabela de cores e seus códigos 

.Se quiser que fique arredondado cole antes da }

border-radius: 10px;
Aonde está 10px é o tamanho, quanto mais colocar, mais arredondado fica



Créditos do código: Sweet Girl


Espero que tenham gostado

Nenhum comentário:

Postar um comentário

Olá fofinhos, antes de comentar é preciso seguir umas regrinhas:
- Não pedir para seguir o seu blog, sem estar seguindo antes.
- Não usar palavrões ou palavras ofensivas.
- Não xingar ou brigar com ninguém.
Responderei seu comentário com muito amor e carinho.
Beijinhos Coloridos para você ^^