Membuat Effect Blur dengan Opacity

Nilai opacity sebenarnya merupakan nilai yang menunjukkan tingkat transparansi sebuah object. Setiap browser menggunakan standar nilai serta bentuk KODE yang berbeda. Nilai transparansi untuk IE menggunakan nilai diantara 0 s/d 100, sedang untuk Mozilla, Opera, Safari, Google Chrome, SeaMonkey serta beberapa browser lain menggunakan standar nilai 0 s/d 1.0. Apabila nilai terendah digunakan (0=nol), maka gambar akan ditampilkan dalam bentuk transparan. Jadi semakin kecil nilai opacity, maka gambar menjadi semakin transparan hingga menjadi tak terlihat. Dalam penggunaannya, opacity property dapat di aplikasikan melalui kode css tau langsung dalam tag html. Penempatan yang bersifat permanen dilakukan pada bagian head dalam bentuk kode css, sedang penggunaan pada bagian body bersifat temporer. Sifat opacity yang mampu menciptakan banyak fungsi membuatnya banyak digunakan untuk menciptakan effect-effect yang atraktif dan dinamis sehingga tampilan blog menjadi semakin variatif dan menarik.

KODE-KODE di bawah ini merupakan contoh pemanfaatan opacity untuk menciptakan effect blur pada gambar :

1. Penggunaan opacity di bagian head. KODE ini bisa ditempatkan di atas ]]></b:skin>

Kode CSS :

.GRblur img{
        filter:alpha(opacity=20);
        opacity:0.2;border:0;
}
.GRblur:hover img{
        filter:alpha(opacity=100);
        opacity:1.0;
}

xHTML :

<a href="URL" class="GRblur"><img src="image.jpg" border="0" width=".." height=".." /></a>

<a href="http://gubhugreyot.blogspot.com" class="GRblur"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTnS16ODng4emDPjGbFyFPKfSVDX8g_bPMqpNKMwY_ppEPbJl0nMgojDdZBMg4NPCX2NqN-YlC0MqI2AnXOJ1Zqbeb89vBKmFg5ariS1Cpio4u3GQmZNuJ_bjAzu_D9r7tmNyvV4cJ140/s250/img_gubhugreyot_gadisku-06b.jpg" border="0" width="250" height="250"/></a>

2. Penggunaan opacity di bagian body (di ruang posting) yang bersifat temporer:

xHTML :

<a href="http://gubhugreyot.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTnS16ODng4emDPjGbFyFPKfSVDX8g_bPMqpNKMwY_ppEPbJl0nMgojDdZBMg4NPCX2NqN-YlC0MqI2AnXOJ1Zqbeb89vBKmFg5ariS1Cpio4u3GQmZNuJ_bjAzu_D9r7tmNyvV4cJ140/s250/img_gubhugreyot_gadisku-06b.jpg" style="filter:alpha(opacity=40);opacity:0.2;" width="250" height="250" border="0" /></a>

Catatan/Keterangan :

1. Menggunakan opacity property dalam bentuk kode css yang disimpan di atas kode ]]></b:skin> , membuat posting lebih irit kode karana tak perlu menuliskan opacity property dalam tag html. Kode yang ditambahkan hanya berupa class atau id.
2. Semakin besar opacity maka gambar semakin jelas (transparansi berkurang).
3. Panduan cara backup template, cari kode dan cara menyimpan kode dapat dibaca di "Special Tutorials" disebelah kiri halaman.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:

Update »Setu PAHING, Maret, 24, 2012

» Happy Blogging - gubhugreyot «