(Tutorial CSS - Box com cantos arredondados)

16/08/11 15:38

CSS Site do Maujor

Tutoriais CSS, Web Standards, Tableless, Acessibilidade, HTML, XHTML, Padres Web, por Maurcio Samy Silva

:: Box com cantos arredondados ::

Estudo de uma tcnica
A construo de boxes com cantos arredondados uma tcnica CSS que apresenta muitas variaes e cujo assunto tem sido objeto de inmeros tutoriais publicados na Web. Uma busca no Google por "CSS rounded corners" (cantos arredondados com CSS) retorna mais de 5 milhes de pginas. Recentemente Ryan Thrash publicou matria mostrando um aperfeioamento da tcnica de construo de boxes com cantos arredondados por ele inventada em novembro de 2003. quela poca, a tcnica teve o reconhecimento dos 'experts', tendo sido citada no Blog do Dave Shea criador do CSS Zen Garden e em comentrios abonadores de Eric Meyer na lista de discusso CSS-D. A tcnica comprovadamente atual, tanto que mereceu um aperfeioamento. Contudo como j citado existem muitas tcnicas para obter o efeito de cantos arredondados com CSS e a opo pelo uso desta ou daquela cabe exclusivamente voc. Eu, considero esta tcnica muito interessante e no fao qualquer restrio ao seu uso. Este tutorial no uma traduo do original, visto que o original no detalha a construo dos boxes e aqui farei um estudo de como obter o efeito.

A teoria
Tal como a maioria das tcnicas para construo de cantos arredondados, esta tambm 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 soluo mais simplista, a de construir um retngulo com bordas arredondadas e coloc-lo como imagem de fundo de um elemento nvel de bloco, como por exemplo, uma DIV. Esta soluo fixa as dimenses do box e qualquer redimensionamento de texto arruina o layout. uma soluo restrita a condies muito especficas e seu valor prtico muito baixo. No outro extremo, surge a soluo de se usar 4 elementos nvel de bloco, cada um deles tendo como imagem de fundo um dos cantos do box convenientemente posicionado.
http://www.maujor.com/tutorial/box-arred.php Pgina 1 de 5

(Tutorial CSS - Box com cantos arredondados)

16/08/11 15:38

Foi baseado nesta teoria que surgiu a tcnica aqui mostrada. A verso inicial utiliza uma imagem constituida de um retngulo com bordas arredondadas para fundo dos 4 elementos. Na recente verso o autor dividiu ('fatiou') a imagem inicial em 4, e usa uma para cada elemento. Existem duas abordagens de construo 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 resoluo, contudo 'cresce' e 'encolhe' com o redimensionamento do texto (no ocorre ruina do layout) e na segunda o box 'cresce' e 'encolhe' tanto com o redimensionamento do texto como com a resoluo.

As 4 imagens usadas
A seguir link para as 4 imagens usadas neste tutorial canto-sup-esq.jpg - imagem do canto superior esquerdo - 80 x 203px canto-sup-dir.jpg - imagem do canto superior direito - 960 x 203px canto-inf-esq.jpg - imagem do canto inferior esquerdo - 80 x 429px canto-inf-dir.jpg - imagem do canto inferior direito - 960 x 429px Atualizao em 24 de outubro de 2010: 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 cresa para larguras maiores, aumente a largura das imagens para os cantos superior direito e inferior direito.

A marcao estrutural
O box tem um ttulo e um texto. Para marcar o ttulo usei neste tutorial o nvel seis de cabealhos <h6></h6>. No estranhe, assim fiz para evitar interferncia dos estilos do site no ttulo uma vez que no uso o nvel 6 no site e assim ele no est estilizado nas folhas do site. Voc pode usar o nvel que quiser e estilizar como bem entender. A marcao a mesma para as duas abordagens de construo. 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 pgina (obrigado aos seletores descententes por possibilitar isto):
<div id="boxes"> <div class="fixo"> <div class="titulo"> <h6>Escreva certo</h6>
http://www.maujor.com/tutorial/box-arred.php Pgina 2 de 5

(Tutorial CSS - Box com cantos arredondados)

16/08/11 15:38

</div> <div class="conteudo"> <p>O verbo haver quando empregado com o sentido de existir, invarivel.</p> <p>Exemplos:<br /> <q>Havia muitos e-mails</q><br /> <q>Houve muitas pginas</q><br /> <q>Pode haver outras DIVs</q> </p> </div> </div> <div class="elastico"> <div class="titulo"> <h6>Escreva certo</h6> </div> <div class="conteudo"> <p>Use<strong> ao invs de</strong> para significar <strong>ao contrrio</strong>, ou seja, com idia de oposio. </p> <p>Exemplos: <br /> <q>Pefiro usar preto ao invs de branco.</q><br /> <q>Ao invs de chorar ela sorriu.</q></p> <p>Use<strong> em vez de</strong> para significar <strong>em lugar de</strong>, ou seja, no h idia de oposio.</p> <p>Exemplos:<br /> <q>Pefiro usar uma DIV em vez de uma tabela.</q></p> </div> </div> </div>

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; }
http://www.maujor.com/tutorial/box-arred.php Pgina 3 de 5

(Tutorial CSS - Box com cantos arredondados)

16/08/11 15:38

.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%; }

A renderizao

Escreva certo
O verbo haver quando empregado com o sentido de existir, invarivel. Exemplos:

"Havia muitos e-mails" "Houve muitas pginas" "Pode haver outras DIVs"

Escreva certo
A expresso ao invs de, significa ao contrrio, ou seja, com idia de oposio. Exemplos:

"Pefiro usar preto ao invs de branco."

http://www.maujor.com/tutorial/box-arred.php Pgina 4 de 5

(Tutorial CSS - Box com cantos arredondados)

16/08/11 15:38

"Ao invs de chorar ela sorriu."

Use em vez de para significar em lugar de, ou seja, no h idia de oposio. Exemplos:

"Pefiro usar uma DIV em vez de uma tabela."

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.

http://www.maujor.com/tutorial/box-arred.php

Pgina 5 de 5