CSS - Box com cantos arredondados

Estudo de uma técnica

A construção de boxes com cantos arredondados é uma técnica CSS que apresenta muitas variações e cujo assunto tem sido objeto de inúmeros tutoriais publicados na Web. Uma busca no Google por "CSS rounded corners" (cantos arredondados com CSS) retorna mais de 5 milhões de páginas. 
Recentemente Ryan Thrash publicou matéria mostrando um aperfeiçoamento da técnica de construção de boxes com cantos arredondados por ele inventada em novembro de 2003. Àquela época, a técnica teve o reconhecimento dos 'experts', tendo sido citada no Blog do Dave Shea criador do CSS Zen Garden e em comentários abonadores de Eric Meyer na lista de discussão CSS-D. A técnica é comprovadamente atual, tanto que mereceu um aperfeiçoamento. Contudo como já citado existem muitas técnicas para obter o efeito de cantos arredondados com CSS e a opção pelo uso desta ou daquela cabe exclusivamente à você. Eu, considero esta técnica muito interessante e não faço qualquer restrição ao seu uso. 
Este tutorial não é uma tradução do original, visto que o original não detalha a construção dos boxes e aqui farei um estudo de como obter o efeito.

A teoria

Tal como a maioria das técnicas para construção de cantos arredondados, esta também utiliza imagens de fundo para simular os cantos.
As CSS2.1 estabelecem que somente uma imagem pode ser definida como fundo de um elemento HTML. Baseado nestas premissas a solução mais simplista, é a de construir um retângulo com bordas arredondadas e colocá-lo como imagem de fundo de um elemento nível de bloco, como por exemplo, uma DIV. Esta solução fixa as dimensões do box e qualquer redimensionamento de texto arruina o layout. É uma solução restrita a condições muito específicas e seu valor prático é muito baixo.
No outro extremo, surge a solução de se usar 4 elementos nível de bloco, cada um deles tendo como imagem de fundo um dos cantos do box convenientemente posicionado. 
Foi baseado nesta teoria que surgiu a técnica aqui mostrada. A versão inicial utiliza uma imagem constituida de um retângulo com bordas arredondadas para fundo dos 4 elementos. Na recente versão o autor dividiu ('fatiou') a imagem inicial em 4, e usa uma para cada elemento.
Existem duas abordagens de construção do box neste tutorial, a primeira especifica uma largura em unidades CSS em e a outra uma largura em percentagem. Na primeira o box permanece com a mesma largura qualquer que seja a resolução, contudo 'cresce' e 'encolhe' com o redimensionamento do texto (não ocorre ruina do layout) e na segunda o box 'cresce' e 'encolhe' tanto com o redimensionamento do texto como com a resolução.

As 4 imagens usadas

- imagem do canto superior esquerdo - 80 x 203px

- imagem do canto superior direito - 960 x 203px

- imagem do canto inferior esquerdo - 80 x 429px

- imagem do canto inferior direito - 960 x 429px

Notar que a soma das larguras das imagens é igual a 80px + 960px = 1040px. Essa é a maior largura total do box. Se você pretende que o box cresça para larguras maiores, aumente a largura das imagens para os cantos superior direito e inferior direito.

A marcação estrutural

O box tem um título e um texto. Para marcar o título usei neste tutorial o nível seis de cabeçalhos

. Não estranhe, assim fiz para evitar interferência dos estilos do site no título uma vez que não uso o nível 6 no site e assim ele não está estilizado nas folhas do site. Você pode usar o nível que quiser e estilizar como bem entender.
A marcação é a mesma para as duas abordagens de construção. Mudei apenas a classe da DIV mais externa, usando class="fixo" para o box com largura em em e class="elastico" para o box com a largura em percentagem. Isto possibilitou mostrar os dois boxes em uma mesma página (obrigado aos seletores descententes por possibilitar isto):

 

   

Escreva certo


  O verbo haver quando empregado 
com o sentido de existir, é invariável.


  Exemplos:
 
   Havia muitos e-mails

   Houve muitas páginas

   Pode haver outras DIVs
    


 


 

   

Escreva certo


  Use ao invés de para 
significar ao contrário, 
ou seja, com idéia de oposição. 


  Exemplos: 

    Pefiro usar preto ao invés de branco.

    Ao invés de chorar ela sorriu.


  Use em vez de para significar 
em lugar de, ou seja, não há idéia de oposição.


  Exemplos:

    Pefiro usar uma DIV em vez de uma tabela.


 


<

A folha de estilos

#boxes {
 font: 0.9em Arial, Helvetica, sans-serif;
 width:100%;
 color:#333; 
 margin: 0;
 }
.fixo {
 margin: 0 auto;
 width: 25em;
 background: url(canto-inf-dir.jpg) no-repeat 100% 100%;
 font-size: 100%;
 }
.titulo {
 background: url(canto-sup-dir.jpg) no-repeat 100% 0;
 margin: 0;
 padding: 0;
 text-align: center;
 }
.titulo h6 { 
 background: url(canto-sup-esq.jpg) no-repeat 0 0;
 margin: 0;
 padding: 45px 20px 5px;
 color: #333; 
 font-weight: bold; 
 font-size: 1.4em; 
 line-height: 1.0em;
 }
* html .titulo h6 {height: 1%;} /* Hack para IE5 PC */
.conteudo {
 background: url(canto-inf-esq.jpg) no-repeat  0 100%;
 color:#fff;
 margin: 0;
 padding: 5px 35px 45px;
 }
#boxes .conteudo p {
 margin:0.7em;
 line-height:1.2em;
 }
.elastico {
 width:100%;
 background: url(canto-inf-dir.jpg) no-repeat 100% 100%;
 font-size: 100%;
  }

Resultado Final

Teste você mesmo

Redimensione a janela do seu navegador e observe o comportamento dos dois boxes.
Agora aumente e diminua o tamanho da fonte no navegador e observe o comportamento dos dois boxes.