Rabu, Juli 07, 2010

CSS3 bulatan Image Dengan jQuery

Suatu hari saya sedang mencoba CSS3 perbatasan-radius untuk elemen gambar gaya dan aku menyadari bahwa Firefox tidak menampilkan perbatasan-radius pada gambar. Lalu aku membayangkan cara untuk bekerja di sekitar itu - wrap tag span main dengan gambar asli sebagai gambar-latar belakang. Terima kasih kepada Darcy Clarke kode jQuery yang melakukan sihir pembungkus tag secara otomatis.

Tujuan

Tujuan saya menggunakan perbatasan CSS3-radius dan fitur-bayangan kotak untuk membuat tampilan gambar elemen seperti gambar di bawah.

Image and video hosting by TinyPic


Masalah

Masalahnya adalah tidak satupun dari browser modern sudut bulat menampilkan gambar seperti yang saya inginkan. WebKit tidak menampilkan sudut dibulatkan, tapi bayangan kotak inset tidak didukung. Pada Firefox, batas radius bahkan tidak ditampilkan sama sekali.

Image and video hosting by TinyPic


The Trick CSS

Caranya sangat sederhana: bungkus tag elemen span di sekitar gambar. Tentukan gambar asli sebagai latar belakang-gambar. Untuk menyembunyikan gambar asli, tentukan opacity: 0 atau display: none. Saya menemukan menggunakan metode opacity adalah pendekatan yang lebih baik karena gambar akan tetap tersedia untuk menyalin atau download.

Image and video hosting by TinyPic


Final Solusi Dengan jQuery

Untuk mempermudah, kita dapat menggunakan jQuery untuk secara otomatis tag span membungkus di sekitar gambar.

Kode jQuery di bawah ini akan menemukan elemen dengan "bulat-img". Atau "" bulat-img2 (dalam kasus saya, itu adalah elemen gambar) dan bungkus dengan tag span. script ini juga menemukan adanya, src lebar, tinggi, dan atribut CSS kelas dari gambar asli dan menerapkannya sebagai penata inline pada tag span. Kemudian menentukan opacity gambar ke 0 untuk menyembunyikannya.

Ia bekerja dengan dimensi gambar (dengan atau tanpa atribut lebar dan tinggi). Hal ini juga dapat dikombinasikan dengan CSS kelas lain. Tidak ada markup tambahan diperlukan.

Image and video hosting by TinyPic

<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>



Contoh Penggunaan

Saya harap Anda akan menemukan trik ini berguna. Misalnya, Anda dapat menggunakannya untuk gaya blog Anda avatar atau foto profil.
Image and video hosting by TinyPic

CSS3 bulatan Image Dengan jQuery Rating: 4.5 Diposkan Oleh: Edi Z