Monday, October 4, 2010, 14:45

Memanjakan IE dengan CSS3 menggunakan PIE

“IE juga butuh dimanjakan.”

Cukup itu saja preambule-nya, sekarang mari kita mulai bermain.


Langkah 1:

Download dahulu ramuan ajaib kita, sebuah behavior IE bernama PIE, di sini.

Langkah 2:

Upload file PIE.htc tersebut ke server.

Langkah 3:

Now, we’re good to go. Silakan gunakan properti CSS3 pada website Anda. Contoh sederhana, mari kita buat border-radius:

#SpongeBob {
    border: 1px solid #999;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

Langkah 4:

Tinggal kita masukkan behavior ke target kita tersebut:

behavior: url(path/to/PIE.htc);

Secara lengkap akan seperti ini:

#SpongeBob {
    border: 1px solid #999;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
behavior: url(path/to/PIE.htc);
}

Catatan: Yang harus diingat bahwa path/to/PIE.htc ini relative ke file html kita, bukan dengan file css-nya. Pada beberapa kasus, CSS Pie tidak akan berjalan karena masalah relative path ini. Misal pada wordpress yang memakai pretty permalink, maka tipsnya adalah, letakkan file PIE.htc pada root folder, kemudian pada CSS tulis line berikut: behavior: url(/PIE.htc)

Ada beberapa fitur CSS3 yang memerlukan properti khusus, misal untuk multiple background maupun linear gradient, kita harus menuliskan shorthand property: -pie-background

Untuk lebih jelas mengenai fitur CSS3 yang disupport oleh PIE, silakan berkunjung ke sini.

Maaf font-nya berwarna-warni :D

Heri Setiawan

Web designer dan front-end developer muda yang belum terlalu jelas dari spesies mana dia berasal. Pada sebuah eksperimen, dia mampu bertahan di dalam air selama 323,007645 detik, dan bisa melayang di udara dengan ketinggian mencapai 15,23 meter. Karena sering berpindah habitat, kini ia memutuskan untuk berada di darat dan menekuni dunia Web Design, HTML5, CSS, dan jQuery.

Follow me on Twitter

6 komentar di “Memanjakan IE dengan CSS3 menggunakan PIE”

  1. Vyatri says:

    aaargh….! keduluan. Baru aja mau nulis tentang PIE. huks.. huks..

  2. Dr.acer says:

    Apa ini juga bisa berguna untuk WordPress? blog acer pakai wordpress soalnya :)

Tinggalkan Komentar

*