Criando bordas arredondadas com CSS

Este tutorial tem como finalidade ensinar ao leitor uma técnica de criar caixas com títulos e bordas arredondadas estilizada com CSS (Cascade Style Sheets).

Utilizarei neste tutorial o editor HTML Dreamweaver, mas em paralelo estarei também disponibilizando o código fonte e comentando-o.

É pré-requisito para este tutorial conhecer algum bom editor de imagens, neste utilizei o Photoshop 7.0 - Português .

 

Ao final do Tutorial o leitor estará apto a criar caixas como esta abaixo:

bom aprendizado

1° passo (Criando as imagens):

Criar as imagens que ficarão no topo e no final da "caixa".

Crie uma Caixa com borda arredondada com largura de 380 pixels, o fundo (background) da caixa será a mesma do fundo da página:
Obs:. Se você já sabe como criar uma caixa com borda arredondada, pode ir para o passo 2.

 

 

No Photoshop:"Novo" >

No Photoshop: "Novo" > "Ferramenta Retângulo arredondado"

No Photoshop: "Novo" > "Ferramenta Retângulo arredondado" > "Define o raio de 25 pixels (Você poderá alterar o valor do raio).
Obs:. O raio será o raio de curvatura das bordas.

No Photoshop: "Novo" > "Ferramenta Retângulo arredondado" > "Define o raio de 25 pixels" > "Desenhando a imagem"

Eu coloquei uma borda de 5 pixels cor #000000 (Preta) na minha imagem - > .

No Photoshop: "Camada" >" Estilo de Camada" > "Traçado"

Pronto! Imagem criada

Agora com a ferramenta de selecionar e copiar mesclado, ou "corte demarcado" corte somente a parte de cima e salve a imagem como topo.gif:

Invertendo a figura "topo.gif" verticalmente temos uma outra imagem, salve-a como rodape.gif.

 

2° passo (Criando o html):

Com as figuras criadas, vamos para o código html da caixa.

Criando a caixa:

<div id="caixa"><!-- Início da Caixa -->


</div><!-- Fim da Caixa -->

Adicionando o Título e o conteúdo:

<div id="caixa"><!-- Início da Caixa -->

<h1>Bom Aprendizado</h1> <!-- Título -->


<!-- Início do parágrafo -->
<p>Este simples tutorial mostra como montar uma "caixa" com título e borda
arredondada estilizada com CSS.</p>
<!-- Fim do parágrafo -->

</div><!-- Fim da Caixa -->

Ok, a página ficará da seguinte forma:
Calma, não se assuste, pois o segredo esta no CSS, seguindo a premissa máxima do CSS de separar o conteúdo do layout.

3° passo (Criando o CSS):

Entre as tags <head> coloque o seguinte código:

<style type="text/css">

/* estilizando o ID caixa */
#caixa {
width: 380px; /* definindo a largura */

background-color: #FFF; /* definindo a cor de fundo*/

/* Agora iremos utilizar aquela imagem que criamos "rodape.gif" */

/* definindo a imagem de fundo, que ficará em baixo no rodapé e não se repetirá */

background-image: url(rodape.gif); background-repeat: no-repeat;
background-position: bottom;

padding-bottom: 25px;

}

 

/*Estilizando o título (h1)

No título vou colocar a figura "topo.gif", dando a impressão da caixa

*/

#caixa h1 {
background-image: url(topo.gif);
background-repeat: no-repeat;
background-position: top;
font: 24px "Arial", sans;
margin: 0px;
padding: 6px;
color: #993300;
text-align: center;
}

/* Estilizando o parágrafo, nesta tag iremos estilizar inserindo bordas laterais do mesmo tamanho da borda criado nas figuras "rodape.gif" e "topo.gif" (5 pixels) e obviamente a mesma cor também (Preto - #000000) */

#caixa p {
border-left: 5px solid #000;
border-right: 5px solid #000;
margin:0px;
padding: 9px;
padding-top: 0px;
}

</style>

Veja o resultado final abaixo:


Bom Aprendizado

Este simples tutorial mostra como montar uma "caixa" com título e borda arredondada estilizada com CSS.

Comentários e sugestões serão bem vindos.

 

Com um pouco de imaginação pode-se criar outros estilos

Observações

É mais interessante ao invés de colocar o estilo css dentro da mesma página do HTML, inserir em um arquivo externo .css e "anexá-lo" na página através da seguinte sintaxe:

<link href="arquivo.css" rel="stylesheet" type="text/css">

Acabou que em nenhum instante "mostrei" como são os "passos" para fazer esta caixa no Dreamweaver, ficarei devendo. Como desculpas envio links de bons tutoriais sobre CSS no Dreamweaver.

http://www.mugmg.com.br/artigo.cfm?id=501

http://www.tableless.com.br/artigos/tablelessdw.asp

É importante destacar que esta é uma das técnicas de criar bordas arredondadas, existem muitas outras maneiras (talvez até mais corretas utilizando CSS). Nota-se que ao colocar somente a tag <p> estilizada com as bordas laterais eu estou forçando o desenvolvedor a colocar todo o conteúdo da caixa dentro do conteúdo de <p>, e estilizando <h1> com a figura topo.gif eu DETERMINO que todas as caixas terão um título, por isto intitulei este tutorial como "Caixas com títulos e bordas arredondadas..."

 

Para um melhor entendimento sobre o processo, tentei esboçar um modelo, caracterizando a estilização das tags.

Conclusões

A mágica do CSS é poder separar completamente o conteúdo do layout, isto dá mais segurança ao desenvolvedor na hora de implementar as manutenções pois diminui os "impactos" que normalmente acontecia quando não havia esta separação. Procurei também dar um sentido mais amplo a semântica do HTML, encaixando o título na sua respectiva <tag>, desta forma os crawles (robôs de busca) indexam mais facilmente a sua página e caso o usuário utilize um browser sem suporte a CSS o conteúdo será exibido corretamente.

Dúvidas e sugestões serão bem vindas.

Abraços,

Marcelo Linhares
http://www.marcelolinhares.com/

 

Referências: