JQuery Bordas Arredondadas (Rounded Corners)

[Eliseu M. 2]

E aí pessoal, beleza?? Sou novo aqui no fórum e percebi que o pessol gosta muito de aprender novas coisas, então eu vou ensinar a fazer bordas arredondadas em 30 segundos, com JQuery.

 

Crédito a sites como: MALSUP.COM e METHVIN.COM

 

Muito sites que ensinam essa técnica, sempre acabam sendo não-completos, então eu pesquisei e vou repassar para vocês. (Não esqueçam de baixar os plugins e hospedá-los, para maior segurança)

 

Primeiro inserimos JQuery Min (obrigatório):

 

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>

Versão de hoje! Para atualizar: http://code.google.com/p/jqueryjs/

 

Bom, eu utilizei o código do site malsup.com, que permite vários tipos de bordas. Mas atenção, outros scripts podem ter diferenças sutis que acabam dando muito mais trabalho.

 

<script type="text/javascript" src="http://malsup.com/jquery/corner/jquery.corner.js"></script>

 

Agora faremos a mágica!

 

<script>

$(document).ready(function(){

$(".demo").corner("round 10px");

});

</script>

<div class="demo" style="background-color:green; padding:20px;">Demo Box</div>

Observações:

- O elemento (no caso DIV) há de ter PADDING suficiente para que as bordas sejam criadas.

- Os textos em vermelho são de classe (CSS), podendo ser trocado por qualquer outro (.minhaborda) e também transformado em ID (#minhaborda). Mas se um for mudado, o outro também há de ser mudado.

- O texto em negrito é o estilo da borda. Você pode conferir muitos outros em:

 

http://www.malsup.com/jquery/corner/

 

Bom galera, é isso, agora abusem da criatividade! Até mais!

 

Créditos: MALSUP, JQuery, SquareFree, METHVIN, Pedro.Lisium, ATBlabs.

 

------------------- EDIT

 

Ae galera, eu vi alguns problemas de incompatibilidade, principalmente no Internet Explorer. Obs.: todos os meus testes foram feitos em FF e GC. Acho que esse outro script pode ajudá-los:

 

http://www.atblabs.com/jquery.corners.html

 

Té mais!

[Bruno Augusto 417]

Exatamente.

 

Usei por um tempo, mas não sei se foi exatamente desse Malsup. Conheci quando nem plugin oficial para jQuery ele era, havendo só modificações "piratas" no original.

 

 

E tinha uma série de incompatibilidades que, felizmente, foram solucionadas. Isso ajuda e muito os Noobs++ em design como eu era.

 

Com a evolução das espécies, agora sou apenas Noob+, e faço com imagens mesmo. :P

 

Mas é isso aí Eliseu, chegou chegando no fórum de cara com tutorial e bem organizado. Parabéns e continue.

[Splinterzin 0]

Qual a diferença entre usar imagens e esse plugin ?

 

Utilizo ele a ums 3~4 meses ja, parei completamente de trabalhar com imagens para arredondar cantos ( mto trabalhoso, gera mto código html, sem falar, que você tenq ficar utilizando tabelas para tudo ), mas enfim, existe uma diferença em termos de design entre o jQuery corner e imagens ??

 

Pois pelo que você disse, deixou de ser Noob++ para Noob+ (rsrsrsrsr) usando imagens.. Defina isso.

 

fiquei confuso pq vejo muito por ae tableless...

 

Para o Eliseu, tenho uma pergunta: "você já fez aqueles efeitos com o corner, para colocar uma borda ao redor da div, arredondada ?"

 

No site doMalsup, tem la os efeitos 'Adornment', que sinceramente já tentei fazer de um zilhão de maneiras e ainda nao caiu a ficha daquilo.. rsrsr... se alguem utiliza e ja fez esse efeito, posta ae.. faço igualzinho lá, até copiei os códigos html e css para ver, e a shit nao funciona !!

 

Mas vlw pelo post Eliseu... ^^ Very Nice.

[Eliseu M. 2]

E aí Splinterzin, tudo bem?? Então, uma solução é você inserir uma DIV dentro de outra:

 

<script>
$(document).ready(function(){
$(".demo").corner("round 4px");
$(".demo2").corner("round 4px");
});
</script>
<div class="demo" style="background-color:green; padding:2px;">
<div class="demo2" style="background-color:#9f0; padding:10px;">Demo Box</div>
</div>

 

Super simples :D Até mais!

[conectado 0]

olá estou com várias dúvidas em relação a instalação desse jquerycorner.. aonde coloco o código.. porque aparece uma caixa verde quando insiro o código abaixo da tag</head> e porque não funciona as bordas redondas.. obrigado.