Perjalanan seorang Herli

"because writing is, like death, a lonely business." – Neil Gaiman

Transparansi di CSS untuk semua browser

Gara-gara saya mendapat tugas men-slice satu desain yang amat sangat “ajaib”, saya harus mengais-ngais informasi di belantara internet. Untung ada Google yang membuat hidup saya lebih mudah 🙂

Akhirnya saya menemukan code yang membantu saya (http://css-tricks.com/css-transparency-settings-for-all-broswers/) membuat transparansi 50%:

.transparent_class {
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}

Penjelasannya saya kutip langsung dari websitenya:

Here is what each of those CSS properties is for:

  • opacity: 0.5; This is the “most important” one because it is the current standard in CSS. This will work in most versions of Firefox, Safari, and Opera. This would be all you need if all browsers supported current standards. Which, of course, they don’t.
  • filter:alpha(opacity=50); This one you need for IE.
  • -moz-opacity:0.5; You need this one to support way old school versions of the Mozilla browsers like Netscape Navigator.
  • -khtml-opacity: 0.5; This is for way old versions of Safari (1.x) when the rendering engine it was using was still referred to as KTHML, as opposed to the current WebKit.

Benar-benar jitu! Tapi koq pada saat saya coba di IE7, masih tidak jalan ya ?

Nah, ini dia bagian yang nyebelin. Di Internet Explorer, ternyata kita harus menambahkan property width dan/atau height di css nya.Hanya di IE! Di Firefox 3, saya tes, code diatas jalan dengan mulus.

Kenapa sih, semua browser ngotot punya standard masing-masing? Menyusahkan saja! Huh !!

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>