Cara Membuat Effect Blur dengan Opacity

Cara Membuat Effect Blur dengan Opacity | Tips Trik Tentang Opacity | Artikel Fafan kali ini mengulas seputar efek 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. apakah anda suka artikel fafan kali ini ? simak sambil santai ya.....

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="http://fafansuka.blogspot.com/" class="GRblur"><img src="http://3.bp.blogspot.com/-VMDxCth--28/UYMvPxLIXhI/AAAAAAAAB9o/q2AEYfUWYeo/s1600/558471_567678489930975_1798083130_n.jpg" border="0" width="250" height="250"/></a>

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

xHTML :

<a href="http://fafansuka.blogspot.com/"><img src="http://3.bp.blogspot.com/-VMDxCth--28/UYMvPxLIXhI/AAAAAAAAB9o/q2AEYfUWYeo/s1600/558471_567678489930975_1798083130_n.jpg" style="filter:alpha(opacity=40);opacity:0.2;" width="250" height="250" border="0" /></a>


Catatan/Keterangan :

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.
Semakin besar opacity maka gambar semakin jelas (transparansi berkurang).

Selamat bila anda berhasil... ... Artikel ini tentang Cara Membuat Effect Blur dengan Opacity

Backlink here..

<div dir="ltr" style="text-align: left;" trbidi="on"> <a href="http://fafansuka.blogspot.com/2013/06/cara-membuat-effect-blur-dengan-opacity.html"><b>Cara Membuat Effect Blur dengan Opacity</b></a> | Tips Trik Tentang Opacity | Artikel Fafan kali ini mengulas seputar efek 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. apakah anda suka artikel fafan kali ini ? simak sambil santai ya..... <img alt="thinking" src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/39.gif" /><br /> <br /> KODE-KODE di bawah ini merupakan <b>contoh pemanfaatan opacity untuk menciptakan effect blur pada gambar</b> :<br /> <br /> 1. Penggunaan opacity di bagian head. KODE ini bisa ditempatkan di atas <b>]]></b:skin></b><br /> <br /> <br /> Kode CSS :<br /> <br /> <i>.GRblur img{<br />        filter:alpha(opacity=20);<br />        opacity:0.2;border:0;<br />}<br />.GRblur:hover img{<br />        filter:alpha(opacity=100);<br />        opacity:1.0;<br />}</i><br /> <br /> xHTML :<br /> <br /> <i><a href="http://fafansuka.blogspot.com/" class="GRblur"><img src="http://3.bp.blogspot.com/-VMDxCth--28/UYMvPxLIXhI/AAAAAAAAB9o/q2AEYfUWYeo/s1600/558471_567678489930975_1798083130_n.jpg" border="0" width="250" height="250"/></a></i><br /> <br /> 2. Penggunaan opacity di bagian body (di ruang posting) yang bersifat temporer:<br /> <br /> xHTML :<br /> <br /> <i><a href="http://fafansuka.blogspot.com/"><img src="http://3.bp.blogspot.com/-VMDxCth--28/UYMvPxLIXhI/AAAAAAAAB9o/q2AEYfUWYeo/s1600/558471_567678489930975_1798083130_n.jpg" style="filter:alpha(opacity=40);opacity:0.2;" width="250" height="250" border="0" /></a></i><br /> <br /> <br /> Catatan/Keterangan :<br /> <br /> Menggunakan opacity property dalam bentuk kode css yang disimpan di atas kode <b>]]></b:skin></b> , membuat posting lebih irit kode karana tak perlu menuliskan opacity property dalam tag html. Kode yang ditambahkan hanya berupa class atau id.<br /> Semakin besar opacity maka gambar semakin jelas (transparansi berkurang).<br /> <br /> Selamat bila anda berhasil...<img alt="applause" src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/41.gif" /> ... Artikel ini tentang <a href="http://fafansuka.blogspot.com/2013/06/cara-membuat-effect-blur-dengan-opacity.html"><b>Cara Membuat Effect Blur dengan Opacity</b></a></div> <br/> Sumber: <a href='http://fafansuka.blogspot.com/2013/06/cara-membuat-effect-blur-dengan-opacity.html'> Fafan Suka Blogging, Tutorial Blogger | Tips Trik Blog | Belajar Blogspot | Bisnis </a>