Arredondando cantos com JQuery

Olá amigos! Vamos para outro artigo utilizando jQuery?

Cada vez mais há preocupação dos clientes e desenvolvedores para o desenvolvimento de sistemas web bem projetados, elaborados e acabados. Isso é resultado da exigência cada vez maior que os usuários destes sistemas têm. E entre essas exigências, temos o layout!

Preocupados com isso, os profissionais que projetam o design têm se especializado cada vez mais. E um recurso muito usado são os cantos arredondados, que suavizam as formas e trazem harmonia ao layout.

A maior parte dos desenvolvedores ainda recorta os cantos arredondados das figuras e utilizam essas imagens para compor o elemento final, em HTML. Mas há soluções em javascript que facilitam muito a vida dos desenvolvedores. Porém, das soluções que já testei, nenhuma delas tem a característica de arredondar cantos de elementos com borda! Agora já tem!

Vamos conhecer o Plugin RoudedCorners-Canvas, que arredonda cantos de qualquer* elemento HTML que possa ter borda (mesmo que esteja sem a borda)!

* Na verdade, dos elementos que testei, só não funcionou com o TABLE.

Veja o resultado final.

Arredondando Cantos

Para demonstrar o funcionamento e opções de uso desse plugin e como é fácil arredondar cantos com ele, vou utilizar este código HTML. Como podem ver, o código não merece maiores explicações pois é apenas um conjunto de DIVs e MENU para demonstração.

A única observação é que dentro de cada DIV está o código que gerou o seu canto arredondado.

• O arquivo excanvas.js só precisa ser carregado para que o script funcione no Internet Explorer.

O código CSS também não tem nada demais e vou deixar somente o link aqui: Código CSS.

Desta vez também não explicarei o código javascript. Aí você pergunta: então vai fazer o quê?

É que a utilização deste plugin não tem detalhes e configurações como os outros. Então eu vou mostrar aqui as poucas (mas suficientes) opções disponíveis. Para isso, precisamos saber que usaremos a seguinte sintaxe:

$(elemento).corner([tamanho] [locais]);

Onde,

[tamanho] – opcional. No padrão “00px”, onde 00 pode variar de 0 a 20. Determina o tamanho da curva. Em caso de não utilizar nenhum valor, será assumido o valor padrão de 10px.

[locais] – opcional. Pode receber um dos valores abaixo ou uma combinação desses valores, separados por um caracter de espaço. Em caso de não utilizar nenhum valor, todos os cantos são arredondados:

• top – define que os cantos superiores serão arredondados.
• bottom – define que os cantos inferiores serão arredondados.
• tr – define que o canto superior direito será arredondado.
• tl – define que o canto superior esquerdo será arredondado.
• br – define que o canto inferior direito será arredondado.
• bl – define que o canto inferior esquerdo será arredondado.

Agora que você entende pra que serve cada código, é olhar o exemplo que postei e observar o que está mudando.

Conclusão

Vimos nesse artigo que podemos usar o javascript para facilitar nossa vida e arredondar cantos de elementos HTML com mais facilidade. Claro que tudo tem sua desvantagem. Nesse caso, a desvantagem fica pelo fato dos cantos não ficarem arredondados caso o Javascript esteja desabilitado no browser do cliente. Mas, caso isso ocorra, a única coisa que acontece é que os cantos ficam normais, não muda margin e padding, como em outros scripts que fazem o mesmo trabalho.

Em contrapartida, tem a vantagem de ser muito mais produtivo e de fácil manutenção, se comparado à técnica de arredondar cantos com recortes de imagens.

Eu prefiro utilizar essa forma! E você? Deixe um comentário sobre a técnica que você utiliza e a técnica que você utilizará daqui para frente!

Abração!