Aprenda fazer cantos arredondados com jQuery Corner
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
- Abrir visualizar impressão usando javascript
Filed under: JQUERY