Criando imagens com cantos arredondados com jQuery

Olá gente…

O post de hoje é sem dúvida uma das coisas mais interessantes que já fiz em minha curta carreira de desenvolvedor web. Falaremos de como criar imagens com cantos arredondados utilizando somente a nossa tão queria jQuery, e um script chamado jQuery IMGR.

Sem o uso de uma biblioteca como o jQuery, web designers e afins, precisavam criar imagens png (que possuem fundo transparente) com os cantos arredondados. Agora, com algumas linhas de código podemos criar estas imagens, além de permitir o seu uso dinamicamente.

Mas vamos deixar de conversa e partir pro tutorial.

Para começarmos precisamos fazer o download das bibliotecas que vamos utilizar:

jQuery – http://docs.jquery.com/Downloading_jQuery
jQuery IMGR – http://www.steamdev.com/imgr/

Baixe os arquivos para seu computador. Para melhor organizar, criei uma pasta chamada JS para receber os scripts.

Mãos a obra:

Crie um arquivo HTML e faça a importação dos scripts através dos códigos:

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.imgr.min.js" type="text/javascript"></script>

Coloque este código antes da tag </head>.

Após isso, criaremos o script jQuery que será responsável por criar as bordas em nossa imagem. O código responsável é:

<script type="text/javascript">
$(document).ready(function(){
 $("img.foto").imgr({radius:"10px"}); //Radius é a opção do "tamanho" da borda.
 //Utilizaremos no exemplo a classe foto. Caso seja outra classe, mude o texto de img.foto para img.[nome_da_sua_classe]
});
</script>

Escreva o código abaixo dos códigos anteriores, antes da tag </head>.

Vamos agora, chamar nossa imagem para o arquivo, e definir que ela receba a classe que muda a borda da imagem.

Entre as tags <body> e </body> insira o código da imagem:

<img class="foto" src=" foto.jpg" />

Perceba que assim como no meu script jQuery, defini que a classe que iria receber as modificações do script era “foto”, portanto na foto, defini que a classe da imagem era foto.

Código Completo:

 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.imgr.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("img.foto").imgr({radius:"20px"}); //Radius é a opção do "tamanho" da borda.
 //Utilizaremos no exemplo a classe foto. Caso seja outra classe, mude o texto de img.foto para img.[nome_da_sua_classe] 
});
</script>
</head>

<body>
 <img src="foto.jpg" />
</body>
</html>

Feito isso, é só rodar o arquivo e “tcharam”, a foto ficará com as bordas arredondadas.

Vou disponibilizar aqui, os arquivos para download. Caso você possua alguma dúvida, não deixe de comentar!

Grande Abraço.

About these ads

6 comentários sobre “Criando imagens com cantos arredondados com jQuery

  1. Marcel arrebentando nas dicas hein! Muito bom!

  2. Realmente uma dica fantástica, há um tempinho eu tava procurando por isso pra colocar em meu site de baladas e não achava,., parabéns brother!

  3. felipe santiago

    Parabéns cara!! Me ajudou muito!!

  4. olá, boa dica! tenho uma dúvida…
    estou usando css sprite em umas 100 imagens no meu site, como eu poderia incorporar a essas imagens??
    veja como fica no meu site: ; como eu poderia colocar para ele chamar a class=”so” ; mudando o “img.foto” e colocando “class.so” ?

    • Olá Gilson! Obrigado pela visita

      Quando uma função jQuery é criada, é setado nela um marcador. Quando o código é percorrido, o código é executado no marcador setado.
      No seu link não existe nenhuma classe, portanto, seria interessante adicionar uma, como por exemplo:
      <a href="" title="So" class=”foto” rel=”nofollow”>

      Para que as fotos que estão na classe “foto” serem exibidas com os cantos arredondados, é só alterar na função a linha que seta a classe ou ID. Exemplo:
      $(".foto").imgr({radius:"20px"}); //Radius é a opção do "tamanho" da borda.

      Desta forma, as fotos com classe “foto” será exibidas com os cantos trabalhados.

      Espero que auxilie, mas qualquer coisa volte a perguntar!

      Grande Abraço!!!

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s