Elementos HTML Arredondados Com jQuery Curvy Corners

Quando o assunto é web design, a criatividade dos bons designers não tem limites. Eles criam peças incrivelmente belas, com boa usabilidade e navegabilidade e, sempre que possível, com foco na experiência do visitante (pelo menos, é o que se espera). Entretanto, algumas vezes tamanha criatividade não pode ser totalmente “convertida” em uma página de web em função de dificuldades técnicas que, por ventura, possam existir.

Não são raros os casos em que o programador de interface desconhece técnicas para fazer o HTML+CSS funcional ficar idêntico à imagem que lhe foi passada. Um dos casos comuns em que isso acontece é quando há elementos arredondados na concepção do visual do site. Alguns consideram prover elementos arredondados uma tarefa complexa e, exatamente pensando nisso, existe um plugin excelente, chamadojQuery Curvy Corners.

Com jQuery Curvy Corners é possível:

• Arredondar elementos a nível de bloco (ex. DIVs)
• Suporte a anti-aliasing
• Bordas e imagens de background

O Curvy aplica, dinamicamente, alguns conceitos de CSS3 para realizar o arredondamento. Uma de suas grandes características é que, caso o browser já tenha suporte nativo, ele simplesmente não faz nada, deixando a renderização por conta do próprio navegador e poupando o uso de recursos.

Como Usar o jQuery Curvy Corners

Existem várias maneiras de se usar o Curvy Corners; a mais simples é a mostrada a seguir. Para começar, faça o download do script e descompacte-o na estrutura de diretórios de seu projeto. Existirem várias versões do script; pessoalmente, prefiro a minificada.

Então, basta fazer a chamada ao script no “head” dos documentos que deseja que o script atue:

Agora, simplesmente escolha o(s) elemento(s) de bloco que quer arredondar e escreva a linha de programação para ativar o script:


$('.arredondado').corner();


Simplíssimo!

Oções do jQuery Curvy Corners

É possível, também, especificar o “nível de arredondamento” para cada canto do elemento-alvo. Usa-se a seguinte convenção:

• tl = top left (canto superior esquerdo)
• tr = top right (canto superior direito)
• bl = bottom left (canto inferior esquerdo)
• br = bottom right (canto inferior direito)

Se quiséssemos, por exemplo, um elemento arredondado com os cantos da esquerda em 10px e, os da direita, 20px, poderíamos usar o seguinte código:


$('.arredondado').corner({
tl: { radius: 10 },
tr: { radius: 20 },
bl: { radius: 10 },
br: { radius: 20 }
});


Para ativar o anti-alias, é só inserir mais uma pequena instrução:


$('.arredondado').corner({
tl: { radius: 10 },
tr: { radius: 20 },
bl: { radius: 10 },
br: { radius: 20 },
antiAlias: true
});


Funções do jQuery Curvy Corners

Algo muito interessante sobre o script é o arredondamento e “desarredondamento” dinâmicos possíveis de se fazer. Basta usar, respectivamente, as funções redrawCorners() e removeCorners(). Por exemplo, caso queira retirar o arredondamento quando algum elemento for clicado, use:


$('a').click(function(){
$('.arredondado').removeCorners();
});


Conclusão sobre o jQuery Curvy Corners

Como citado, existem outras maneiras de se usar o jQuery Curvy Corners, maneiras essas que podem ser observadas e estudas no site oficial do plugin. Além disso, lá é possível encontrar diversos exemplos de uso do Curvy Corners.

Para projetos que precisam atender a um web design mais arrojado através de arredondamento de elementos, certamente este excelente plugin para jQuery realiza bem a tarefa. Por arredondar de forma fácil elementos, por ser executado somente em navegadores sem suporte a CSS3 e por ser crossbrowser, o Curvy está, definitivamente, recomendado!