Busca

Carregando...

terça-feira, 18 de novembro de 2008

CSS: aprendendo a usar bordas

Flores
Quem não quer deixar seu blog mais bonito?

Aprender a utilizar bordas em CSS é um passo imprescindível para deixar a aparência do blog do seu jeito e sem depender de templates prontos. Se forem bem utilizadas elas conseguem deixar o leiaute bonito, leve e sem necessitar de muitas imagens.

Este tutorial foi classificado como intermediário, não tanto pela complexidade do código, mas porque é necessário ter boas noções de design para não deixar seu blog poluído e feio utilizando bordas cafonas ou em exagero.

Definindo bordas direto na tag

<div style='border:2px solid red; padding:5px;'>Este é um exemplo em que eu defini as bordas diretamente na tag. border define a borda e padding define a distância entre o texto e a borda, para facilitar a leitura e ficar bonito.</div>
Este é um exemplo em que eu defini as bordas diretamente na tag. border define a borda e padding define a distância entre o texto e a borda, para facilitar a leitura e ficar bonito.
<div style='border-width:2px; border-style:solid; border-top-color:#ccccff; border-right-color:#ccffff; border-bottom-color:#ccffcc; border-left-color:#ffffcc; padding:5px;'>Este é um exemplo em que eu defini as bordas diretamente na tag. border define a borda e padding define a distância entre o texto e a borda, para facilitar a leitura e ficar simpático.</div>
Este é um exemplo em que eu defini as bordas diretamente na tag. border define a borda e padding define a distância entre o texto e a borda, para facilitar a leitura e ficar simpático.

Definindo bordas na folha de estilos

Como já foi dito no tutorial anterior, sua folha de estilos é tudo que está entre as tags <b:skin> e </b:skin> do Blogger ou entre as tags <style> e </style> de outros sites e blogs.

Escolha o elemento ao qual deseja acrescentar alguma borda. Neste exemplo eu quero acrescentar uma borda ao elemento <h2>. Eu procurei o elemento na minha folha de estilos e verifiquei que ele está assim:

h2 {font-size:180%;}

Vou acrescentar bordas a ele:

h2 {font-size:180%;
border:1px solid #f0f0f0;
border-bottom:1px solid #cccccc;
border-right:1px solid #cccccc;
padding-bottom:5px;
padding-right:5px;}

Lembrando mais uma vez que padding é a distância entre o texto e a borda. Exemplo de como vão ficar meus títulos que usam a tag <h2> depois que eu fizer essa modificação:

Eles vão aparecer com bordas

Tipos de bordas

Nos exemplos acima utilizei o tipo solid, mas não só de solid vivem as bordas. Vejamos:

<div style="border:2px dotted deeppink; padding:5px;">Exemplo de borda dotted (pontilhada).</div>
Exemplo de borda dotted (pontilhada).
<div style="border:2px dashed dodgerblue; padding:5px;">Exemplo de borda dashed (tracejada).</div>
Exemplo de borda dashed (tracejada).
<div style="border:5px double chocolate; padding:5px;">Exemplo de borda double (duplicada).</div>
Exemplo de borda double (duplicada).
<div style="border:10px ridge gold; padding:5px;">Exemplo de borda ridge (moldura).</div>
Exemplo de borda ridge (moldura).
<div style="border:10px groove gold; padding:5px;">Exemplo de borda groove (moldura invertida).</div>
Exemplo de borda groove (moldura invertida).
<div style="border:2px inset yellowgreen; padding:5px;">Exemplo de borda inset (baixo-relevo).</div>
Exemplo de borda inset (baixo-relevo).
<div style="border:2px outset yellowgreen; padding:5px;">Exemplo de borda outset (alto-relevo).</div>
Exemplo de borda outset (alto-relevo).
<div style="border:2px solid hotpink; padding:5px;">Exemplo de borda solid (sólida).</div>
Exemplo de borda solid (sólida).
<div style="border:hidden; padding:5px;">Exemplo de borda hidden (escondida).</div>
Exemplo de borda hidden (escondida).
<div style="border:10px lightblue; border-style:solid dotted dashed groove; padding:5px;">Exemplo de bloco usando quatro bordas diferentes, sendo que a ordem é no sentido horário: a primeira é sempre border-top e a quarta sempre border-left.</div>
Exemplo de bloco usando quatro bordas diferentes, sendo que a ordem é no sentido horário: a primeira é sempre border-top e a quarta sempre border-left.
<div style="border:5px plum; border-style:dotted dashed; padding:5px;">Quando eu coloco só dois estilos em border-style, o primeiro é border-top/border-bottom, o segundo é border-left/border-right.</div>
Quando eu coloco só dois estilos em border-style, o primeiro é border-top/border-bottom, o segundo é border-left/border-right.
<div style="border:5px coral; border-style:double hidden dotted; padding:5px;">Quando eu coloco três estilos em border-style, o primeiro é border-top, o segundo é border-left/border-right e o terceiro é border-bottom.</div>
Quando eu coloco só dois estilos em border-style, o primeiro é border-top, o segundo é border-left/border-right e o terceiro é border-bottom.

Lista completa de propriedades:

  • border você usa para definir as três características da borda: largura, estilo e cor.
  • border-top você usa para definir a borda superior.
  • border-bottom você usa para definir a borda inferior.
  • border-left você usa para definir a borda esquerda.
  • border-right você usa para definir a borda direita.
  • border-style você usa para definir o estilo da borda.
  • border-top-style você usa para definir o estilo da borda da borda superior.
  • border-bottom-style você usa para definir o estilo da borda da borda inferior.
  • border-left-style você usa para definir o estilo da borda da borda esquerda.
  • border-right-style você usa para definir o estilo da borda da borda direita.
  • border-color você usa para definir a cor da borda.
  • border-top-color você usa para definir a cor da borda superior.
  • border-bottom-color você usa para definir a cor da borda inferior.
  • border-left-color você usa para definir a cor da borda esquerda.
  • border-right-color você usa para definir a cor da borda direita.
  • border-width você usa para definir a largura da borda.
  • border-top-width você usa para definir a largura da borda superior.
  • border-bottom-width você usa para definir a largura da borda inferior.
  • border-left-width você usa para definir a largura da borda esquerda.
  • border-right-width você usa para definir a largura da borda direita.

Para escolher cores que combinam com seu blog, visite sempre nossa tabela e nosso cubo de cores.

Ufa! Até eu relembrei um monte de coisa que não usava mais com este post. Espero que tenham gostado.

Fonte: HTMLDog

Posts relacionados