Saturday, August 28, 2010

Membuat Efek Transparan Pada Gambar

Untuk memberikan efek transparan pada elemen gambar, kita bisa gunakan properti pada CSS yaitu opacity:nilai dan filter:alpha(opacity=nilai). Kedua properti tersebut memiliki kesamaan dalam tingkat ketransparannya, yang membedakan keduanya hanyalah nilai dan support browsernya.
Untuk properti opacity:nilai digunakan pada browser Firefox dengan nilai 0.0 hingga 1, sedangkan properti filter:alpha(opacity=nilai) digunakan pada browser IE dengan nilai 0 hingga 100. Semakin kecil nilainya, semakin besar tingkat ketransparannya. Efek transparan ini hanya dapat terlihat pada browser yang mendukung CSS3.

Coba perhatikan gambar di bawah ini. Lalu sorotkan cursor anda kegambar ini. Apakah yang terjadi.


Cara membuatnya hanya menambahkan kode css saja. Perhatikan kode di bawah ini lalu pastekan di atas kode ]]></b:skin>.


img {
opacity:0.6;
filter:alpha(opacity=60);
}
img:hover {
opacity:1;
filter:alpha(opacity=100);
}

Simpan dan lihat hasilnya.
Semoga Bermanfaat.
sumber:w3school

0 comments:

Post a Comment