Uma das grandes questões de um desenvolvedor web, principalmente aquele cuja especialidade é web design e/ou que tenha algum tipo de preocupação com o estilo das imagens que compõem um site, certamente é como usar imagens com cantos arredondados. É bastante comum, quando falamos de um web design mais arrojado, a necessidade de apresentar imagens com o canto redondo.
Existem diversas técnicas CSS para fazer com que um div fique com cantos arredondados, mas não a imagem, em si. Então, é possível, de forma relativamente simples, inserir uma imagem numa div e arredondar esta div, mas o efeito alcançado está mais para um “emendo” do que para a solução pretendida.
Pois bem, é possível usar imagens redondas no site através de um plugin bastante útil para jQuery, o IMGr jQuery Image Rounder!
Usando o IMGr jQuery Image Rounder
Assim como a maioria dos plugins para jQuery, usar o IMGr jQuery Image Rounder é algo bastante simples e é possível configurar a exibição de sua imagem através de poucos parâmetros. Evidentemente, a primeira coisa a se fazer é baixar o IMGr jQuery Image Rounder (recomendo a versão minificada, pois é menor e confere o mesmo resultado) e adicionar, nas páginas em que se vai usá-lo, a chamada ao jQuery e ao plugin (referencie corretamente os arquivos):
Depois disso, basta especificar, através dos seletores jQuery, quais elementos (no caso, quais imagens) serão afetadas pelo IMGr. Por exemplo, queremos arredondar, com um raio de 10px, todas imagens que tenham a classe “imgr”:
jQuery(document).ready(function($){
$('img.imgr').imgr({
radius:'10px'
});
});
Opções do IMGr jQuery Image Rounder
O IMGr jQuery Image Rounder também possui outras opções igualmente fáceis de serem usadas. São elas:
[table id=2 /]
Então, se fosse preciso exibir uma imagem com somente os cantos superior esquerdo e inferior direito com raio de 20px e uma borda de espessura de 3px laranja, o código seria:
jQuery(document).ready(function($){
$('#image').imgr({
color:"#E59A1A",
radius:"20px 0 20px 0",
size:"3px"
});
});
Aplicando IMGr dinamicamete
O plugin também permite aplicar suas características para exibir imagens de canto arredondado dinamicamente. Por exemplo, ao clicar em um botão qualquer:
jQuery(document).ready(function($){
$('.btn').click(function(){
$('#image').imgr({
color:"#E59A1A",
radius:"20px 0 20px 0",
size:"3px"
});
return false;
});
});
Conclusão sobre o jQuery Image Rounder
Como pôde ser visto pelos exemplos acima, usar o IMGr é muito simples! Com pouquíssimas linhas de código, é possível exibir imagens com cantos arredondados (inclusive de forma dinâmica).
O que deve ser levado em conta é que, dependendo das especificações que sejam usadas (por exemplo, borda mais espessa), é preciso levar isso em conta na hora de definir o “fluxo” do site, já que o espaço necessário, em função do arredondamento, aumentará.
Uma observação fica por conta de seu uso em Internet Explorer (para variar). As imagens em que o IMGr atua costumam ficar ligeiramente borradas. Nada que dificulte a visualização, mas dá para notar a diferença. Cabe ao desenvolvedor julgar se esse é um empecilho para a utilização do jQuery Image Rounder.
