E-Siber.com
M. Mekin Pesen
Sitede 1775 okunmaya değer yazı var.

jQuery ve CSS3 ile Yuvarlak Köþeli Resimler

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:

rendering problemsBir 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/


· · · · · · · · · · ·
Yazan: | 08.07.2010 | 4741 kez okundu.

Yazılar E-Posta Kutunuza Gelsin:

Bu yazıyı izinsiz olarak alıp başka herhangi bir yerde yayınlayamazsınız (Bkz "dijital at hırsızı" kimdir?). Yazıların başka yerlerde yayınlanmasına ücreti mukabili izin veriyoruz. Yazıları izinsiz olarak başka bir yerde yayınlamanız, her türlü hukuki sonucu kabul ettiğiniz manasına gelir. Yazıları izin almak ve kaynak göstermek kaydıyla sadece kamu kurumları ve akademik araştırmacılar ücretsiz olarak kullanabilir. Bunların dışında kalan herkes ücret öder. Detaylar için bize ulaşın.

Yorum altyapısı: Disqus

Yukarı Çık

M. MEKİN PESEN
© 2007-2015 E-SİBER BİLGİ-İLETİŞİM TEKNOLOJİLERİ
E-Siber.com | E-Siber.net | ESiber.com | ESiber.net | RSS | Facebook | Twitter | E-Posta Aboneliği
IP: 54.81.47.168 | Yüklenme: 0.468 saniye. | Hakkımızda | İletişim | Reklam Verin | Site Politikaları | Atıflar