border-radius: Caixas com cantos arredondados

AGRADEÇA AO AUTOR COMPARTILHE!
Border Radius no Firefox

Border Radius no Firefox

Olá galera!

Para dar início a série de posts práticos sobre Desenvolvimento Web, hoje vou dar algumas dicas que solucionaram quase todos os meus problemas com layouts “arredondados”. Por que quase todos? A resposta: Algumas destas dicas não se aplicam ao IE ou ao Opera :-(.

Há uma implementação da CSS 3 que prevê o suporte dos navegadores ao “desenho” de caixas com cantos arredondados (ainda não suportado pelos navegadores). A maneira mais comum de fazermos isto é utilizando imagens, css e elementos HTML não-semânticos. Ok, até aí tudo bem… mas e quando estamos tratando de fundos em degradê?! A coisa complica.

Pesquisando sobre o assunto, pude constatar que o Webkit e o Gecko (motores do Safari e do Firefox, respectivamente) possuem soluções proprietárias para renderizar border-radius:

-moz-border-radius: 5px;
-webkit-border-radius: 5px;

Adicionamos a propriedade especificada pela CSS 3 só para não ficarmos com o peso na consciência, e para garantir que nossa caixa fique visível para futuros browsers que suportem este padrão:

border-radius: 5px;

Em Opera isso não se aplica. Há várias outras formas de desenhar cantos, inclusive utilizando SVG e Canvas. No Dev.Opera podemos ver um exemplo de input com cantos arredondados através de SVG.

Border Radius no Safari

Border Radius no Safari

No site do Maujor há uma proposta de border-radius com PNG transparente que achei bem prática de se implementar (e aparentemente é cross-browser).

Para os amantes da jQuery, há um plugin chamado jQuery Corners que é capaz de reproduzir border-radius decentemente em qualquer browser conhecido (de uma maneira pouco usual para o Opera… mas é capaz). Se você não quer utilizar uma framework javascript para isso, é capaz de utilizar também a biblioteca CurvyCorners.

Fica a dica…

Até a próxima

AGRADEÇA AO AUTOR COMPARTILHE!

Klaus Peter Laube

Mais artigos deste autor »

Tecnólogo em Análise e Desenvolvimento de Sistemas pelo Centro Universitário de Jaraguá do Sul (UNERJ). Desenvolvedor Web de longa data, apaixonado por Python e defensor dos padrões Web. Escreve quando pode no http://www.klauslaube.com.br.


6 Comentários

João F. Melo
1

Acabei de ver esta propriedade em um arquivo css gerado pelo f-spot porque gostei da galeria que ele gerou e fui adaptar para funcionar com PHP.
Gostei muito, faço uso tambem do jQuery e o cornerz para arredondar os cantos.

Show.

Snague
4

Bom Dia.

Muito legal o material, somente gostaria de avisa-lo que o Opera já suporta CSS3, e claro dando suporte a cantos arrendondados.

Se puder modificar essa parte do artigo faca 100%.

Abraços

Deixe seu comentário

Seu endereço de e-mail não será publicado. Campos com * são obrigatórios!

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">