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 [4] (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):
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.imgr.js" type="text/javascript"></script>
Depois disso, basta especificar, através dos seletores jQuery [5], 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:
Parâmetro | Valor Padrão | Variações |
---|---|---|
Color | ‘#000′ | Valores hexadecimais ou cores CSS que admitem ser referenciadas por nome (ex. “red”) |
Radius | ’10px’ | Para radius diferentes em cada canto, mesma aplicação de bordas CSS com declaração única (4 valores em sentido horário) |
Size | ’0px’ | Qualquer número inteiro |
Style | ‘solid’ | ‘solid’, ‘dashed’, ‘dotted’ ou ‘double’ |
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.