Professional Documents
Culture Documents
Bordas Com Cantos Arredondados Utilizando JQuery
Bordas Com Cantos Arredondados Utilizando JQuery
Você desenhou um layout legal para o seu site cheio de cantos arredondados, e tem pavor de codificar ele pois nem sabe por onde começar?
CSS 3: Muito cuidado com essa solução, pois não são todos os navegadores que interpretam o CSS3. Quando ele se tornar padrão será, com
certeza, a melhor solução. Por enquanto, fuja dela.
Background images: É uma das formas mais simples, já que montamos uma imagem com um tamanho fixo e aplicamos como background. Mas
essa solução não é boa, pois se precisarmos aumentar ou diminuir o box, teremos que refazer a imagem.
Tabelas: Não vou nem comentar, apenas fuja de tabelas para montar o layout .
Elementos extras: Podemos simular inserindo um elemento (div, span, etc.) antes e depois do box, mas não é aconselhável, uma vez que “suja”
o código com tantos elementos dispensáveis.
JQuery: É, na minha opinião, a melhor forma de conseguir esse efeito. Além de leve, permite escolher entre vários tipos de bordas diferentes.
1) Carregue os arquivos JS
Carregamos a última versão do JQuery e o arquivo JS com a programação necessária para a aplicação das bordas.
2) Inicialize o plug-in
1 <script type="text/javascript">
2 $().ready(function() {
3 $(".cantosarredondados").corner("10px");
4 });
5 </script>
Na linha 3, aplicamos a borda arredondada em todos os elementos com a classe cantosarredondados. Para aplicar em um determinado elemento (DIV,
por exemplo) é só colocar #nome_do_dia.
Pronto, o DIV acima terá cantos arredondados. O plug-in oferece uma variedade grande de formas para os cantos.
Veja alguns exemplos de DIVs com cantos personalizados ou faça download do exemplo.
1 de 1 30/09/2009 00:24