Aprenda fazer cantos arredondados com jQuery Corner
Posted on outubro 22nd, 2009 by admin
Quem nunca quis colocar um elemento com cantos arredondados em um site?
Existem dezenas de formas de fazer isso, a maioria delas implica no uso de imagens (o que não é errado), mas muitas vezes queremos algo mais rápido, mais dinâmico e se possível, mais leve… E é aí que entra o nosso grande – e poderoso – amigo jQuery!
Existe um plugin do jQuery chamado jQuery Corner que faz o trabalho de arredondar os cantos de um elemento pra você… Se o seu navegador suporta regras de CSS pra isso, ele vai usá-las, se o navegador não suportar (IE6 por exemplo) ele dá o jeito dele e você obtem o mesmo resultado sem precisar criar nenhuma imagem ou hack de CSS.
Exemplo de uso
Veja um exemplo do HTML completo da página de exemplo, aqui:
<html>
<head>
<title>Exemplo - jQuery Corner</title>
<!-- jQuery e jQuery Corner -->
<script language="JavaScript" src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script language="JavaScript" src="http://www.malsup.com/jquery/corner/jquery.corner.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
$(function() {
$('.canto1').corner("rounded 10px");
$('.canto2').corner('bevel 10px');
$('.canto3').corner('notch 5px');
$('.canto4').corner('bite 10px');
});
</script>
<!-- CSS -->
<style type="text/css">
div.canto1 { background: red; height: 100px; width: 400px; float: left; margin: 10px }
div.canto2 { background: blue; height: 200px; width: 300px; float: left; margin: 10px }
div.canto3 { background: green; height: 300px; width: 200px; float: left; margin: 10px }
div.canto4 { background: purple; height: 400px; width: 200px; float: left; margin: 10px }
</style>
</head>
<body>
<div>
<p>Conteúdo</p>
<p>Conteúdo novo</p>
</div>
<div>
<p>Conteúdo</p>
<p>Conteúdo novo</p>
</div>
<div>
<p>Conteúdo!</p>
</div>
<div>
<p>Conteúdo</p>
<p>Conteúdo novo</p>
</div>
</body>
</html>
A mágica toda acontece ali, entre a linha 11 e 14
Com informaçoes de ThiagoBelem
NOTICIAS RELACIONADAS:
- PNG’s transparentes no Internet Explorer com jQuery (IE PNGFix)
- Aprenda a fazer lightBox com Jquery
- Sistema de Avaliação de posts com Jquery
- LAYOUT 3 COLUNAS COM CSS
- 10 ANIMAÇÕES USANDO JQUERY
Filed under: JQUERY