Membuat Efek Blur dengan Opacity

Written by RA_Syihan on Wednesday, November 17, 2010 | Category: Networking, Trick, Tutorial

Nilai opacity sebenarnya merupakan nilai yang menunjukkan tingkat keburaman sebuah gambar. Setiap browser menggunakan standar nilai serta bentuk KODE yang berbeda. Nilai keburaman untuk IE menggunakan nilai diantara 0 s/d 100, sedang untuk Mozilla 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 buram hingga mencapai bentuk gambar transparan. Dalam penggunaannya, opacity bisa ditempatkan di bagian body atau head bergantung kepada tingkat kebutuhan pengguna. Penempatan yang bersifat permanen dilakukan pada bagian head, 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

<style type="text/css">

.blur img {filter:alpha(opacity=20); -moz-opacity:0.2; opacity:0.2;border:0;}

.blur:hover img {filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0; border:0;}

</style>

KODE untuk menampilkan effect opacity saat posting gambar/photo :

<a href="http://gubhugreyot.blogspot.com" class="blur"><img src="http://www.fond-ecran.net/icones/halleberry_004.jpg" border="0" alt="penelopecruz"/></a>

<a href="http://gubhugreyot.blogspot.com" class="blur"><img src="http://www.fond-ecran.net/icones/drewbarrymore_008.jpg " border="0" alt="penelopecruz"/></a>

Catatan :

KODE berwarna hijau merupakan URL gambar yang akan di terbitkan saat posting.

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

<a href="http://gubhugreyot.blogspot.com"><img src="http://www.fond-ecran.net/icones/drewbarrymore_008.jpg" alt="pics" style="filter:alpha(opacity=20); -moz-opacity:0.2; opacity:0.2;border:2;"></a>

Catatan :

Ganti KODE yang berwarna kuning dan hijau dengan yang ingin dipostingkan.