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

17 comentários:

  1. Blz de explicação, mandou ver messsmo!

    ResponderExcluir
  2. MUITOOOOOOOOOOOOOOOO BOMMMMM
    ESSE VAI PARA OS FAVORITOS :D

    ResponderExcluir
  3. vou te contar como o teu tutorial fez a diferença:
    coloquei no meu blog um menu que é nada mais que um javascript implementeado no gadget do layout.
    Pois muito bem, ele só tinha um problema, não tinha divisão e a pessoa que bolou o script, ainda precisava de tempo para resolver, foi quando eu encontrei o teu blog.
    Te convido a dar uma olhadinha lá e ver como ficou.
    Quanto ao tutorial pra mim foi o que naquele momento me resolveu, show de bola.
    abraço

    ResponderExcluir
  4. Eu não vi nenhum menu em JavaScript, mas vi um menu em HTML com bordas. Que bom que foi útil! Volte sempre.

    ResponderExcluir
  5. Fenandinha, vc esqueceu de ensinar como arrendodar os cantos das bordas, como vc fez no seu blog estou curioso para aprender, e aplicar no meu úmilde bloguinho, beijos, e fica com Deus!!! Sou teu fã!!!!

    ResponderExcluir
  6. Fenandinha? Sorte sua não morar em Goiânia. Por errar meu nome, eu daria 300 cascudos em você se te encontrasse por aqui. :P

    Renato, no meu blog eu uso as bordas arredondadas do CSS3. É muito simples de fazer, mas não funciona em todos os navegadores ainda.

    Tutorial: www.css3.info/preview/rounded-border/.

    Volte sempre!

    ResponderExcluir
  7. Desculpe, pelo erro mas, é o costume de chamar minha prima de Fernadinha Obs. O Nome da minha prima é Barbara Fernanda, são dois nome aí confundi na hora de posta o comentário, mas valeu pela dica, se tiver um tempinho visite meu blog e deixe um comentário, vai ser um prazer ter um comentário da princessa da blogosfera rsrsr (com todo o respeito é claro), e não querendo abusar me segue no seguidores beijosss!!! Hellen Fernanda!

    ResponderExcluir
  8. Valeu pela atenção Helen Fernanda, Abraçosss!!! E visite meu úmilde blog www.camilaejulia.com

    ResponderExcluir
  9. Muito bom, só espero que o IE se atualize e que todos possam usar CSS 3!!!

    assim nao ter que ficar criando " hacks ".

    Abss.

    ResponderExcluir
  10. Sim, mas vale deixar claro que o que está neste post deve funcionar em todos os navegadores.

    CSS 3 é no post Bordas arredondadas com CSS 3.

    ResponderExcluir
  11. amei muito bom e simples muito obrigado

    ResponderExcluir
  12. Qual é o Elemento da Bordas do blog externas,do template,como você diz na postagem a cima escolheu o h2 e as bordas externas que nomes são ?

    ResponderExcluir
    Respostas
    1. Se for uma borda que acompanha a tela do navegador você configura em <body>. Se for alguma outra borda é uma das centenas de tags <div> do seu blog, tem que estudar o código para descobrir qual é.

      Excluir
  13. Boa tarde Helen.
    Achei muito bom seu site.Tenho um site e queria mudar algumas coisas nele.Como plano de fundo, montar uma galeria de fotos em html.Vejo que vc posta muitas coisas enteresantes, e gostaria de saber se vc pode postar um modelo de galeria de fotos.
    Grato
    Marcelo
    msn:mhcitabirito34@hotmail.com

    ResponderExcluir
    Respostas
    1. Marcelo, obrigada pela sugestão, mas sugiro que procure tutoriais sobre isso em outro lugar por enquanto. ;)

      Excluir

Posts relacionados