Pedro Caires | Web Development
21nov/090

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>jQuery Corner | Cantos Arredondados - Pedro Caires /blog</title>
	<meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" />
 
	<!-- JAVASCRIPT -->
	<script language="JavaScript" src="Scripts/jquery.js" type="text/javascript"></script>
	<script language="JavaScript" src="Scripts/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: #FFCC00; height: 100px; width: 400px; margin: 30px }
		div.canto2 { background: #FFCC00; height: 100px; width: 400px; margin: 30px }
		div.canto3 { background: #FFCC00; height: 100px; width: 400px; margin: 30px }
		div.canto4 { background: #FFCC00; height: 100px; width: 400px; margin: 30px }
	</style>
</head>
<body>
<div class="canto1">
	<p>Conteúdo</p>
	<p>Conteúdo novo</p>
 
</div>
 
<div class="canto2">
	<p>Conteúdo</p>
	<p>Conteúdo novo</p>
</div>
 
<div class="canto3">
	<p>Conteúdo</p>
	<p>Conteúdo novo</p>
</div>
 
<div class="canto4">
	<p>Conteúdo</p>
	<p>Conteúdo novo</p>
</div>
</body>
</html>

A mágica toda acontece ali, entre a linha 13 e 16.

Veja o exemplo funcionando: Clique aqui
Faça download dos arquivos: Clique aqui

Espero que tenham gostado! ;)

Categorias: JQuery Deixar um comentário
Comentários (0) Trackbacks (0)

Sem comentários


Deixar um comentário


Sem trackbacks

« CSS Reset – O que é e como usar? Trocando o texto quando dar foco em campo »

Categorias

Tópicos recentes

Parceiros

Outros Links