Tips Membuat dan Menuliskan Kode Box Shadow di IE Internet Explorer, Opera, Safari dan Mozzila

Membuat shadow effects menggunakan css3 yang kompatible di semua browser menjadi teramat penting agar apa yang kita desain atau buat bekerja dengan sempurna di semua browser yang ada. Kompatibilitas ini setidaknya akan memberi kelegaan hati serta mengurangi kekecewaan yang mungkin timbul karena apa yang telah kita kerjakan dengan susah payah ternyata tak dapat dinikmati dengan baik di salah satu browser penting yang sering digunakan penikmat internet atau pengunjung blog. Meskipun di Internet Explorer atau IE hasil yang kita peroleh masih terkendala pada css3 rounded corners, namun untuk efek box shadow beruntung karena masih dapat kita fungsikan. Tentu saja kode yang digunakan juga teramat berbeda dengan browser-browser lain yang kodenya dalam bentuk yang mirip satu dengan yang lain. Entah apa sebenarnya yang dimaui oleh IE. Sepertinya persoalan juga terlalu lama dibiarkan sehingga membuat "pening kepala" kita-kita yang mencoba membuat semua desain bisa berfungsi sempurna di semua browser. Yah ... semoga saja segera ada kesepakatan bersama atau setidak-tidaknya usaha untuk saling menyesuaikan diri di browser-browser besar yang sementara ini jadi andalan dan punya pengguna banyak. Bukan mustahil jika masing-masing tidak secepatnya menyesuaikan diri dengan "browser yang menciptakan kemajuan baru terlebih dahulu", maka para penggunanya akan berlarian mencari browser yang paling nyaman, cepat, selalu bisa menampilkan efek dari kode-kode css terbaru.

Bentuk dan Penulisan kode box-shadow

Opera	box-shadow: ..px ..px ..px color
Opera	box-shadow: 2px 2px 2px #888
Mozilla	-moz-box-shadow: ..px ..px ..px color
Mozilla	-moz-box-shadow: 2px 2px 2px #888
Safari	-webkit-box-shadow: ..px ..px ..px color
Safari	-webkit-box-shadow: 2px 2px 2px #888
IE	filter: progid:DXImageTransform.Microsoft.Shadow(color='#888888', Direction=135, Strength=6);
IE	filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=7, offY=7, positive=true);
Contoh-1	<style type="text/css"> .shadow {       box-shadow: 5px 5px 5px #888;       -moz-box-shadow: 5px 5px 5px #888;       -webkit-box-shadow: 5px 5px 5px #888;       filter: progid:DXImageTransform.Microsoft.Shadow(color='#888888',       Direction=135, Strength=5);       } </style>
Contoh-2	<style type="text/css"> .shadow {       box-shadow: -7px -7px 7px #888;       -moz-box-shadow: -7px -7px 7px #888;       -webkit-box-shadow: -7px -7px 7px #888;       filter: progid:DXImageTransform.Microsoft.dropShadow(color=#888888, offX=-7,       offY=-7, positive=true);       } </style>

Contoh box shadow dari kode contoh-1

box shadow

Contoh box shadow dari kode contoh-2

gubhug reyot

Catatan/Keterangan :

1. Penulisan kode warna di IE harus dalam bentuk lengkap (6 karakter)
2. Nilai minus (contoh=-7px) hanya dapat dituliskan di kode yang pertama dan yang kedua. Untuk yang ketiga harus dalam nilai positif,
   contoh: box-shadow: -7px -7px 7px #888;
3. Kode dalam contoh-1 akan menghasilkan efek shadow berbentuk blur shadow effect di IE. Untuk membentuk bayangan di berbagai sisi aturlah direction=135 dalam nilai yang berbeda. Kekuatan (lebar/width) shadow diatur dengan merubah nilai pada Strength=5. Semakin besar nilai Strength maka shadow akan semakin melebar.
4. Kode dalam contoh-2 akan menghasilkan efek shadow berbentuk block shadow effect di IE. Untuk mengatur posisi dan ukuran (kekuatan) shadow diatur dengan merubah nilai dan plus minusnya.
5. Selain di IE, satuan bisa menggunakan em atau px. Posisi shadow diatur dengan memberi nilai 0 (nol) pada 2 kode yang terdepan atau merubah nilai (besaran) serta nilai plus atau minusnya.
6. Sampeyan bisa menambahkan kode-kode tersebut di atas pada kode lain hingga membentuk sebuah fungsi.

Contoh perpaduan kode css shadow effect dengan kode css yang lain

.boksgallery{
       margin:20px 5px;
       width:400px; 
       height:200px; 
       padding:5px; 
       background:#66CCFF; 
       border: 3px solid #444;
       border-radius:12px;
       -moz-border-radius:12px;
       -webkit-border-radius:12px;
       box-shadow: 5px 5px 5px #888;
       -moz-box-shadow: 5px 5px 5px #888;
       -webkit-box-shadow: 5px 5px 5px #888;
       filter: progid:DXImageTransform.Microsoft.Shadow(color='#888888', Direction=135, Strength=5);
       }

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

• 
• 

» Happy Blogging - gubhugreyot «