13 de julho de 2010Melhores formas de se criar cantos arredondados com css3, 2 ou javascript
Fala galera! De booa? (=
É muito freqüente utilizarmos bordas arredondas em layouts e para nós é um grande sacrifício aplicá-las mantendo sempre as boas práticas da semântica e a compatibilidade entre a maioria dos browsers.
Eu particularmente acho que para cada caso pode ser usada uma solução, as vezes a melhor e as vezes uma não muito legal, por isso vou citar alguns exemplos das melhores possibilidades que eu conheço levando em consideração a semântica e a compatibilidade. Claro que cada um tem seus prós e contras, mas ai caberá a você escolher a melhor solução para seu negócio. 
Utilizando Apenas CSS 3
CSS3 está ai cheio de novidades e soluções para suprir nossas principais faltas na construção de layouts, e uma dessas principais necessidades sempre foi a de adicionar bordas arredondadas diretamente do CSS para que enfim nos livremos de utilizar um monte de imagens e tags desnecessárias ao nosso documento. Ela então nos trouxe essa possibilidade através da propriedade border-radius a qual nos possibilita arredondar cantos através de valores númericos, por exemplo: 20px. Maaaaas a vida não são só de flores rsrsrs, o problema é que CSS3 não está totalmente implementada. Maaaas a vida também é cheeeia de flores e por isso existe a possibilidade de se conseguir o efeito utilizando códigos proprietários de cada browser. Vamos aos exemplos:
Se você deseja arredondar bordas de maneira específica, declarando os valores para cada canto do elemento, você só conseguirá fazer renderizar através do Firefox, Chorme e Safari. Para isso, apenas precisamos declarar os códigos proprietários de cada browser.
Veja um exemplo de border-radius especificando cantos com valores diferentes:
Html
CSS
body { font: 12px Verdana, Geneva, sans-serif; }
#global { padding: 40px; }
#menu {
list-style: none;
margin-top: 50px;
height: 20px;
padding: 15px;
width: 800px;
background-color: #F90;
border: 1px solid #d7d7d7;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 16px;
-moz-border-radius-bottomleft: 16px;
-moz-border-radius-bottomright: 8px;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 16px;
-webkit-border-bottom-left-radius: 16px;
-webkit-border-bottom-right-radius: 8px;
}
li { float: left; margin-right: 30px; }
li a { text-decoration: none; color: #333 }
li a:hover { color: #fff; }
Atenção: Fique atento as diferentes formas entre os navegadores para se chamar cada canto.
Veja esse exemplo funcionando
Se você precisa fazer cantos arredondados sem especificar o valor de cada canto, você consegue obter o efeito em todos os browsers, inclusive no Internet Explorer e Opera chamando um arquivo .htc na sua folha de estilo. download do arquivo border-radius.htc
Veja um exemplo:
Html
CSS
body { font: 12px Verdana, Geneva, sans-serif; }
#global { padding: 40px; }
#menu {
list-style: none;
margin-top: 50px;
height: 20px;
padding: 15px;
width: 800px;
background-color: #F90;
border: 1px solid #d7d7d7;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
behavior: url(border-radius.htc);
}
li { float: left; margin-right: 30px; }
li a { text-decoration: none; color: #333 }
li a:hover { color: #fff; }
}
Para saber mais sobre a solução do arquivo .htc para o internet explorer, acesse: http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser
Utilizando Javascript
Se fizer uso da biblioteca jquery em seu site, você tem a possibilidade de adicionar o plugin Jquerys Corner. Esse plugin tem infinitas possibilidades de adicionar cantos arredondados, inclusive você pode escolher o estilo que deseja usar nos cantos através de uma biblioteca do próprio plugin, fantástico hehe. Outro ponto importante sobre o uso do plugin é que você não precisa se preocupar com a compatibilidade dos browsers, jquery é crossbrowser e por isso funciona em todos. Download da Biblioteca Jquery , Download do Plugin Jquery Corner.
Veja um exemplo:
Chamando a biblioteca e o plugin
Html
CSS
body { font: 12px Verdana, Geneva, sans-serif; }
#global { padding: 40px; }
ul { list-style: none; margin-top: 50px; height: 20px; padding: 15px; width: 800px; background: orange; }
li { float: left; margin-right: 30px; }
li a { text-decoration: none; color: #333 }
li a:hover { color: #fff; }
Javascript
$('#menu').corner("8px");
Para saber mais sobre a solução através do plugin, acesse: http://jquery.malsup.com/corner/
Utilizando Imagens e CSS 2.1
Esse é o método mais conhecido, o problema desse método é que na maioria das vezes são adicionadas a marcação elementos “extra” para se conseguir o efeito e isso faz com que percamos na semântica do nosso documento.
Para que usemos essa solução da melhor maneira, somos apresentados a propriedade content a qual nos possibilidade adicionar além das imagens padrão de background, imagens antes e depois do elemento através dos pseudo-elemento :before e :after, dispensando assim o uso de novos elementos html para se conseguir o efeito. Outra notícia boa é que pelo que testei tem um suporte muito bom regular ,falta apenas testar no IE6 e 7. Exceto IE6~7 a solução passou em todos os outros browsers.
Veja um exemplo:
Html
VLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
CSS
div {
max-width: 647px;
background: url(imagens/meio.png) right repeat-y; }
div:before {
display: block;
line-height: 0;
background: url(imagens/direita-cima.png) top right no-repeat;
content: url(imagens/esquerda-cima.png) }
div:after {
display: block;
line-height: 0;
background: url(imagens/direita-baixo.png) bottom right no-repeat;
content: url(imagens/esquerdo-baixo.png) }
p{ padding: 15px; color: #fff; font: 12px Verdana, Geneva, sans-serif }
Veja mais detalhes sobre essa solução, acesse: http://maujor.com/w3ctuto/roundshadow.html
Bom é isso ai pessoal, enquanto CSS 3 não é totalmente implementada, acho que hoje essas sejam as melhores maneiras para se chegar ao resultado do canto redondo. bom uso e um abraço!!
4 Comentários »
Feed RSS dos comentários deste post URL de TrackBack
Deixe um comentário
ThiagoFasano - Portflio verso 2.0
Fala Thiago!
Bem interessante, mas no terceiro caso vc ainda esbarra com o fato do IE não reconhecer as pseudo-classes :after e :before, e nem a propriedade content. No fim das contas vc vai ter que fazer na mão a inserção dos benditos DIVs extras.
Foi isso que eu fiz nesse site aqui: http://imoveisnorj.com.br
Mas gostei das suas soluções.
No mais, quando possível, acredito que o melhor dos mundos é recorrer pro CSS3 e garantir uma “degradação graciosa” (graceful degradation) pros browsers antigos. Não fica tão ruim. Dá uma olhada nos boxes da home do Mundi com o IE e em um browser moderno
Comentário por Leonardo A. Souza — 13 de julho de 2010 @ 23:20
Faaalae Léo.
Poo, concerteza, graceful degradation e css3 puro é minha 1º escolha. Fiz o teste no Mundi e a diferença é muito sutil, bem legal. Outro exemplo disso é o próprio twitter. enfim, estando tudo funcionando tá tudo certo. rs
Mas se for realmente necessário arredondar os cantos, dentre as soluções do post, a que possui a inclusão do .htc p mim é a mais ideal por ser crossbrowser no resultado final. eu sou muito contra adicionar novos elemtos na marcação. rs só quando não tem jeito mesmo. rsrsrs
abraçoo
Comentário por admin — 14 de julho de 2010 @ 12:15
nice post. thanks.
Comentário por nursing schools — 5 de agosto de 2010 @ 14:08
[...] Fonte:thiagofasano.com.br [...]
Pingback por danielfacanha.com//Blog » Blog Archive » Bordas arredondadas + Jquery — 7 de agosto de 2010 @ 5:33