$show=home

Membuat Gambar Transparan Dengan CSS

SHARE:

Setelah rekan blogger mengetahui bagaimana caranya memasukan gambar ke dalam blog, baik itu di postingan, sidebar ataupun pada header. Selan...

Setelah rekan blogger mengetahui bagaimana caranya memasukan gambar ke dalam blog, baik itu di postingan, sidebar ataupun pada header. Selanjutnya silahkan rekan blogger ikuti trik dibawah ini tentang membuat gambar menjadi transparan atau istilahnya Opacity dengan memasukan sedikit kode css kedalamnya. Seperti contoh yang saya terapkan pada space iklan diatas, dengan menambahkan efek mouseover.

Perhatikan contoh gambar dibawah ini!

image1
image1

Untuk membuat gambar menjadi transparan kita perlu membubuhkan kode css kedalam kode gambarnya. Perhatikan kode gambar dibawah ini :

<img src="url gambar anda" alt="keterangan gambar" width="150" height="113" style="opacity:x; filter:alpha(opacity=x)"/>


Pada kode yang berwarna hijau merupakan kode yang ditambahkan untuk membuat gambar menjadi transparan. Kalau kita perhatikan Ada dua penambahan pada kode berwarna hijau, pertama opacity:x; dan 1filter:alpha(opacity=x). Pertama, opacity:x; merupakan kode yang di support oleh Mozilla Firefox. Kita bisa mengganti huruf x dengan nilai antara 0.0 - 1.0. Nilai yang lebih rendah membuat gambar lebih transparan. Kedua, filter:alpha(opacity=x) merupakan kode yang di support oleh Internet Explorer. Huruf x bisa kita ganti dengan 0 - 100. Sama halnya dengan diatas, nilai yang yang lebih rendah membuat gambar lebih transparan.

Menambahkan efek mouseover

image1 image2

Untuk menambahkan efek mouseover, ada sedikit kode yang mesti ditambahkan. Penambahannya ialah onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40".
Pada bagian onmouseout, silahkan rekan-rekan tambakan nilainya sesuai dengan kode transparannya. Sedangkan pada onmouseover, tidak perlu ada perubahan. Sehingga kode keseluruhan pada efek mouse over menjadi seperti ini :

<img src="url gambar anda" alt="keterangan gambar" width="150" height="113" style="opacity:0.4; filter:alpha(opacity=40)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

KOMENTAR

BLOGGER: 6
Loading...
Name

Adsense,1,Affiliates,2,Android,6,Aplikasi,8,Apple,2,Artikel,14,Award,1,Bahasa,3,BBM,1,Beasiswa,1,Bisnis,1,Bisnis Internet,8,Blog Contest,2,Blogger,15,Cianjur Festival,2,CMS,4,Coretan Pribadi,18,CSS,5,Download,9,Dunia Pendidikan,10,E-book,1,Edukasi,7,Festival Nasyid,1,Forex,1,Gebyar FKIP,1,GEG,2,Google,4,Grab,5,Grabfood,2,Happy New Year 2010,1,Hari HIV Aids,1,Humor,1,HUT RI,1,Idul Adha,1,Idul Fitri,2,Info Cianjur,4,Informasi,33,Internet,9,Iseng,5,Jibas,1,Kabar Cianjur,3,Karya Tulis,1,Kesehatan,9,Ketika Cinta Bertasbih,1,KMII 2009,1,Komputer,1,Kontak Saya,1,Lintas Berita,20,Lintas Jabar,8,Lomba,1,Mahasiswa,17,Merdeka,1,Motivasi,1,Muri FOSS,1,Novel,1,NUPTK,2,ospek,1,Pelajar,2,Pendaftaran SMK Islamiyah,1,Ramadhan,2,Resensi Buku,3,Reuni,1,Reuni Smansa,1,Sejarah Cianjur,3,Sekolah,1,Seminar,1,Seminar 2009,2,Seputar Cianjur,24,Seputar Kampus,4,Seputar Nasyid,3,Sinopsis,2,Sistem Informasi,2,Tafakur,8,Tag,1,teknologi,3,Tips n Trik,16,Tips Sehat,2,Tutorial Blog,11,Website,3,Widget,2,Windows,3,Wisata bahasa,1,
ltr
item
Website Asep Nurdin: Membuat Gambar Transparan Dengan CSS
Membuat Gambar Transparan Dengan CSS
http://asnur06.googlepages.com/Waterlilies.jpg
Website Asep Nurdin
http://www.asepnurdin.com/2009/02/membuat-gambar-transparan-dengan-css.html
http://www.asepnurdin.com/
http://www.asepnurdin.com/
http://www.asepnurdin.com/2009/02/membuat-gambar-transparan-dengan-css.html
true
15063752939711634
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE CARI ALL POSTS Not found any post match with your request Beranda Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Untuk membukanya silahkan Bagikan postingan ini terlebih dahulu Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy