(Tutorial CSS - Box com cantos arredondados)

:: Box com cantos arredondados ::

OK

Estudo de uma tcnica A construo de boxes com cantos arredondados uma tcnica CSS Concorra a 15 Casas com que apresenta muitas variaes e cujo assunto tem sido objeto de Carro na Garagem. Invista no Hiperfundo Bradesco para clientes inmeros tutoriais publicados na Web. Uma busca no Google por Shopinvest.com.br/HiperFundos "CSS rounded corners" (cantos arredondados com CSS) retorna Promoo: Cadastre-se mais de 5 milhes de pginas. Cadastre-se no Peixe Urbano e tenha Descontos para Recentemente Ryan Thrash publicou matria mostrando um Explorar sua Cidade! aperfeioamento da tcnica de construo de boxes com cantos PeixeUrbano.com.br/Cadastre-se arredondados por ele inventada em novembro de 2003. quela Microsoft Office 365 poca, a tcnica teve o reconhecimento dos 'experts', tendo sido Teste Grtis o Microsoft Office 365. Veja a Soluo citada no Blog do Dave Shea criador do CSS Zen Garden e em Empresarial J! www.Microsoft.com/Office365 comentrios abonadores de Eric Meyer na lista de discusso CSS-D. A tcnica comprovadamente atual, tanto que mereceu um Aprenda HTML5 de verdade. A maior carga horria e o melhor contedo do mercado aperfeioamento. Contudo como j citado existem muitas tcnicas Membro do W3C para obter o efeito de cantos arredondados com CSS e a opo pelo www.ilearn.com.br 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. 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):
01. 02. 03. 04. 05. 06. 07. <div id="boxes"> <div class ="fixo"> <div class ="titulo"> <h6>Escreva certo</h6> </div> <div class ="conteudo" > <p>O verbo haver quando empregado

Anncios Google

Manual De CSS Mudar Imagem Melhorar Imagem

Diretiva @font-face
Escolha uma fonte Escolha uma fonte

Destaques

FAQ - CSS QUIZ - CSS Editor CSS do DWMX 2004 Aprenda CSS desde o incio
Fundamentos CSS

Introduo s CSS Sintaxe CSS Tipos de CSS A propriedade CSS font A propriedade CSS text A propriedade CSS margin Propriedades das bordas A propriedade CSS padding A propriedade CSS background A propriedade CSS list Pseudo-elementos Entrelinhas - Propriedade line-height Medidas CSS Regras CSS para cores Abreviando declaraes CSS Herana CSS
CSS em ao

Font interativo Text interativo Border interativo Background interativo Seletores CSS2.1
Efeitos CSS gerais

Sombras em textos 1 (desatualizado) Sombras em textos 2 (desatualizado) Sombras em boxes (desatualizado) Estilos em cabealhos 1 Estilos em cabealhos 2 Botes Barra de rolagem do IE colorida Zoom em imagem Filtro alpha com CSS Botes flash com CSS Mapa de imagem com CSS Molduras com CSS Tcnicas CSS para substituir imagens Box com cantos arredondados Galeria de fotos com CSS Transparncia com CSS Efeito Drop Cap
Efeitos em links

http://maujor.com/tutorial/box-arred.php[12/12/2011 20:08:10]

(Tutorial CSS - Box com cantos arredondados)

Regras gerais para links Efeitos com caracteres Fundamentos gerais Diferentes mesma pgina Estilizar link em clula
Efeitos em tabelas 08. 09. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 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><

Cores alternadas nas linhas Bordas e clulas com CSS Personalizar bordas de tabelas
Menus

Portas corredias com CSS Tcnicas gerais Trs exemplos Menu com rollover de imagem Menu com ToolTip Estilizar um menu de salto Barra de navegao Tool tip em barra de navegao Menu de navegao Menu mapa de imagem Menu drop down Menu drop down - Parte 2 Menu fotolog Barra de navegao tipo boto
Formulrios

A folha de estilos
01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. #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%; }

Formulrios acessveis Formulrios geral Formulrios de contato

CSS3

Devo aprender CSS3? Sombras em textos com CSS3 Seletores CSS 3 Mdulo Template Layout das CSS3 Mdulo Boxes Flexveis das CSS3 Diretiva @font-face das CSS3 Mdulo para cores das CSS3 Biblioteca Modernizr para HTML5 e CSS3 Borda com imagem Mdulo Transition das CSS3
Artigos

Funcionalidades no Opera Div Mania Folhas CSS alternativas BoxModelHack A especificidade e o efeito cascata Importando fontes Dicas para desenvolver CSS Mais dicas para Folhas de Estilo As CSS e as tabelas Servir XHTML como XML Seletores CSS 2.1 Substituio de imagem CSS: Guerra da Especificidade Comentrios condicionais Raciocinando com DIVs O conceito hasLayout do IE O IE7 e os Hacks CSS Tutorial RSS XHTML para dispositivos mveis Adeus tag EMBED Esconder CSS de IEs antigos 10 itens para a prxima verso do IE

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"

http://maujor.com/tutorial/box-arred.php[12/12/2011 20:08:10]

(Tutorial CSS - Box com cantos arredondados)

Estilizando abreviaturas e acrnimos A propriedade CSS display Tabelas quebrando layout O que so Web Standards Oito dicas para servir (X)HTML Padding em elementos inline Leitores de tela e display:none Hacks CSS Alinhar imagens em textos Estrutura de cabealhos CSS Sprites
Dicas

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

"Pefiro usar preto ao invs de branco." "Ao invs de chorar ela sorriu."
Use em vez de para significar em lugar de, ou seja, no h idia de oposio. Exemplos:

HTML em desuso Centrar um elemento na vertical Centralizar uma pgina na tela Dica(tooltip) com CSS Scroll em clula de tabela Fundo degrad na pgina Tabela de codifio de caracteres
Posicionamento

"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.

O Box Model Elemento no meio da tela Absoluto e relativo

Layout CSS

Layout CSS 3 colunas Vrios templates 3 colunas - qualquer ordem Layout 3 colunas - 2 Partes Layout 2 colunas - 4 Partes 2 colunas com faux column Layout CSS passo a passo Posicionar o rodap embaixo da janela
Imagens com CSS

Gosto Confirmar Tweetar

Anncios Google

XHTML CSS Templates

CSS to HTML

CSS Tutorial Layout

CSS Box

Desenvolvimento com Padres Web? Adquira os livros do Maujor

Clique o livro para detalhes.

Desenhando com CSS Relgio digital Bandeira Britnica Baralho com CSS
Normas W3C

Zonas horrias XForms 1.0 - FAQ Eventos XML para autores HTML XML Base xml:id Vers0 1.0 Recomendao CSS 1 do W3C Recomendao XHTML 1 do W3C Tcnicas CSS para acessibilidade Tipos de mdia para XHTML
Tutoriais W3C

ltima modificao: 2011/09/24 22:59:58 GMT Publicado em: 2006-08-10

Figuras com legendas Cantos arredondados e sombras Menu fixo na tela Layout sem tabelas Incio com HTML + CSS Sombras Fontes
Artigos W3C

Help validador (X)HTML do W3C Meu site standard! E o seu? Mudando para Web Standards Site vlido - passo a passo Dicas de qualidade FAQ - HTML e XHTML

http://maujor.com/tutorial/box-arred.php[12/12/2011 20:08:10]

(Tutorial CSS - Box com cantos arredondados)

Formato para data-hora Documentos W3C traduzidos Traduo Cap2 livro CSS Ampersands, PHP Sessions e HTML vlido
Internacional

Charset no cabealho HTTP Cdigos de controle Links com <select> Codificao de caracteres em arquivo CSS Servindo XHTML 1.0 Configurar idioma no browser Codificar idiomas Quem usa Unicode?
Web Standards

FAQ - Web Standards CheckList-Web Standards Tutorial XHTML

Acessibilidade

Tcnicas CSS para acessibilidade Dez testes de acessibilidade Acessibilidade nas CSS2 Introduo acessibilidade Checklist de acessibilidade WCAG - Uma Viso Geral Navegao pelo WCAG 1.0 Slide Show WCAG Componentes de acessibilidade Inacessibilidade de captcha Tabelas acessveis Personalizando preferncias Analisador de contraste de cores Barra de ferramentas Funes da barra de ferramentas Desenvolvendo AJAX acessvel Selos de conformidade Planejando acessibilidade Web Formulrios acessveis prova de spam Uso do JAWS para avaliar acessibilidade WCAG Samurai Acessibilidade na HTML5
CSS Slide Show

O que CSS Slide Show? Show #1 - CSS uma viso geral

Dreamweaver

Tabela com cantos arredondados Construir uma barra de navegao com DW e CSS Editor CSS do DWMX 2004 Fireworks Crditos - Credits

Parceiros Criar Web ComunidadeWEB Cadastro em site de busca Drogas? T Fora ! Visitantes hoje: 4.847 Visitantes desde 14/11/09: 484.114

QR Code do Site

http://maujor.com/tutorial/box-arred.php[12/12/2011 20:08:10]

(Tutorial CSS - Box com cantos arredondados)

Site criado em agosto de 2003 por [Maurcio Samy Silva] Design por [Arthur Henrique] Copyright 2003-2011. A marcao HTML deste site no valida devido a incluso de cdigos da API de terceiros Cruel! :-(

http://maujor.com/tutorial/box-arred.php[12/12/2011 20:08:10]