Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

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://lh3.googleusercontent.com/-UeKVEw2FII4/TxpkR_5d8rI/AAAAAAAAADs/bCDkgWlXTkk/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://lh3.googleusercontent.com/-UeKVEw2FII4/TxpkR_5d8rI/AAAAAAAAADs/bCDkgWlXTkk/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 «

2 komentar:

 
GR | Edited by | gubhug reyot