jQuery ve CSS3 ile Yuvarlak Köşeli Resimler

teknoloji haberinin
değil, bilgisinin
peşinde...

"WEB"in Son Çıkan Önemli Yazıları

Revaçta Olan Konular

Sitede şu an 1546 yazı bulunmaktadır.

Follow @esibercom

Gerçek İnternet Hızı Ölçüm ve Test Aracı

Online Virüslü ve Zararlı Siteleri Tespit Edin

Özel Yazılar

Çok Okunanlar

Son Yazılar

Rastgele Yazılar

Son Yorumlar

CSS3 ile beraber gelen etkili özelliklerinden birisi de resimlere yuvarlak ve oval köşeler verebiliyor olmanızdır. Yani resim üzerinde herhangi bir oynama yapmadan CSS3 ile köşeleri oval hale getirebiliyorsunuz. Fakat bu Mozilla Firefox tarayıcısında düzgün çalışmayabiliyor. İşte bu soruna jQuery yardımıyla WebDesignerWall sitesinde bir çözüm bulunmuş.

Yuvarlak köşeyi halletmenin birkaç yolu var. İlki arka plan resmi hilesidir. Bu yöntemde her web sayfasının arka plan rengi istenilen sonucu vermeyebilir. Ayrıca yuvarlak köşeli resim elde etmek için komple sitenin arka planı ile oynamak da mantıksız gelebilir.

İkincisi ise bir CSS yoludur. Resmin etrafını bir <span> etiketi ile çevreleyin. Resmi orjinal <img> etiketi ile göstermek yerine <span> içinde bir arka plan resmi olarak atayın. <img> içinde resmi opacity değerine sıfır '0' verin:

Bir diğer yol ise biraz daha triklidir. jQuery'nin dolambaçlı yolları ile ufak hileler yapılabiliyor:

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".rounded-img, .rounded-img2").load(function() {
    $(this).wrap(function(){
      return '<span class=" + $(this).attr('class') + " style="background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
    });
    $(this).css("opacity","0");
});
});
</script>

Bütün resimler için tek tek yukarıdaki CSS triğini yazmak yerine, bir jQuery fonsiyonu ile bunu otomatikleştiriyorsunuz. Daha detaylı açıklamalar için aşağıdaki bağlantıyı tıklamanızda fayda var.

Adres: http://www.webdesignerwall.com/.rounded-image-with-jquery/

jquery · css3 · css 3 · css · yuvarlak köşe · oval köşe · köşesiz resim · yuvarlak köşeli resim · rounded image · jQuery resim · css resim ·