11 de jan de 2013

Tipos de bordas em html/css

 Olá galerinha, hoje trago para vocês os tipos de bordas e o básico de como usá-las no seu blog.

Primeiro vamos ver os tipos de bodas usadas:






Agora vamos aprender a colocar borda pelo html, para ser usada 
em gadgets, no título do post, footer etc. 

Vamos ao primeiro exemplo.

.h3.post-title {
  margin-top: -10px;
  margin-bottom: 3px;
}
Este é o html base do código das postagens do blog.
Para acrescentar uma borda é só colocar:
border-bottom: 2px dashed #D5E9FD;

Ficando assim:

.h3.post-title {
  margin-top: -15px;
  margin-bottom: -10px;
border-bottom: 2px dashed #D5E9FD;
}
Entendendo o código:

2px é a expessura da borda
dashed é o tipo da borda
#D5E9FD é a cor da borda
bottom é a posição da borda

Posições das bordas:

Top - borda em cima
Bottom - borda em baixo
left - borda do lado esquerdo
right - borda do lado direito

Você pode mudar o que quiser, tamanho, posição, tipo e cor da borda.

2 comentários :

  1. Eu coloco esse código abaixo de que?

    ResponderExcluir
    Respostas
    1. Susany, você pode colocar abaixo do titulo das postagens, nas imagens do blog, abaixo dos títulos dos gadgets...

      Excluir

Qualquer dúvida pergunte que
responderei com prazer.
Só peço que seu comentário
seja relacionado à postagem.

© Princess Tutoriais- Agradece sua visita
2014. Todos os direitos reservados
Pedidos? dúvidas? nos comentários ou na Ask.
imagem-logo