Sedikit Tips CSS 3 dan Alternatif nya di IE untuk Box Shadow

Discussion in 'Desain Web dan Programming' started by mangkukmerah, 18 Mar 2010.

Thread Status:
Not open for further replies.
  1. mangkukmerah

    mangkukmerah Apprentice 1.0

    Messages:
    262
    Likes Received:
    0
    Trophy Points:
    16
    Yup, CSS3 is coming. Ada beberapa hal yang membuat CSS3 menjadi saat menarik untuk digunakan, salah satunya adalah Box Shadow.

    Dengan menggunakan CSS3 , Box Shadowing tidak perlu lagi menggunakan Image yang notabene akan memperberat tampilan website. Namun tentu saja ini ada downside-nya, beberapa Browser lama dan sedikit browser baru (you know who..) tidak mendukung properti CSS ini.

    Satu lagi downsidenya, properti ini belum matang, jadinya beberapa browser hanya menggunakan proprietary property untuk produknya masing-masing, misalnya :

    • -moz-box-shadow untuk Firefox
    • -webkit-box-shadow untuk Chrome dan Safari
    • box-shadow untuk Opera 10.50 beta keatas
    • -khtml-box-shadow untuk Konqueror

    Lalu bagaimana dengan IE (6,7,8) ? well...., tidak ada dan tidak mendukung properti ini. Namun relax, ada cara mengatasi ini dengan properti yang rada-rada ogep khusus untuk IE , berikut trik nya untuk menjalankan properti ini di IE :

    Code:
    progid:DXImageTransform.Microsoft.Shadow(color='#Warna', Direction=Angka, Strength=Angka)
    Yup, dengan memanfaatkan DirectX :) , tuliskan itu di CSS Hacks yang dibuat untuk IE, isikan warna dengan kode warna, direction dengan angka dan strength tentu juga dengan Angka.

    Pengaplikasiannya dapat dilihat di mangkukmerah.com/hosting.html (silahkan dibuka dengan IE 8, kalau untuk IE 6,7 , tampilan overall pasti kacau :( ) , dan silahkan hover mouse di tanda tanya-nya itu.

    Capek dan setengah tiwas ngurusin maunya si IE :( , tiap versi beda-beda hasilnya :(

    PS : Untuk Mod dan Admin, jika link (non-clickable) contoh pengaplikasian diatas dianggap iklan dan menyalahi rules, silahkan dihapus :)
     
  2. anthoplara

    anthoplara Beginner 2.0

    Messages:
    41
    Likes Received:
    1
    Trophy Points:
    8
    Icon Contact Us (disamping'n "about") bermasalah, Icon Navi'n juga cuman nongol separo,, trus table'n agak kurang rapi.... :D itulah Bill Gates, eh IE,,

    Sabar aza Om,, IE di benci smua kalangan yg familiar ma skrip...

    Saya c jarang pake css3, soal'n males brurusan ma IE :D
     
Loading...
Thread Status:
Not open for further replies.

Share This Page

Loading...