Home » Internet » HTML PHP CSS » Box Shadow dan CSS3 Dasar

Box Shadow dan CSS3 Dasar

Kode dasar CSS 3 untuk membuat box shadow atau efek bayangan kotak blog. Untuk mempermudah saat edit theme atau template blog, satu hal yang penting diketahui adalah kode untuk setiap browser mempunyai perbedaan. Khususnya kode CSS 3 untuk membuat atau menambah cantik tampilan blog dengan membuat bayangan (shadow). Dengan mengetahui perbedaan kodenya, maka lebih mudah untuk melakukan editing, karena setiap browser seperti Firefox, Opera, dan Chrome berbeda dalam menampilkan script tersebut.

Walaupun sudah sering edit theme WordPress, dengan autodidak main ubah kode-kodenya, agar pas maka saya selalu mencobanya pada semua browser. Misalnya untuk membuat efek shadow pada border dan background (tutorial contoh kode lebih lengkap). Terkadang sudah pas untuk Firefox, tapi amburadul saat diakses menggunakan Opera, Chrome atau Safari. Sehingga terkadang membutuhkan waktu cukup lama untuk mencobanya. Itu semua karena saya belum mengerti fungsi kode untuk setiap browser berbeda.

Jika mengerti kode dasar CSS 3 maka pekerjaan menjadi lebih cepat dan mudah.

Baiklah, langsung saja contoh kode CSS3 untuk membuat shadow ( bayangan ) pada box atau kotak di Firefox 3.5+, Safari 3+, Opera 10.5 dan Chrome. Internet Explorer (IE) sampai sejauh ini masih belum support :( masih setia dengan segala keluguannya hik hik…

-moz-box-shadow: 5px 6px 7px #d0d0d0;
-webkit-box-shadow: 5px 6px 7px #d0d0d0;
-box-shadow: 5px 6px 7px #d0d0d0;

Dari contoh kode untuk CSS 3 tersebut di atas, perhatikan pada kata yang berwarna merah

-moz-box-shadow untuk membuat shadow di browser Firefox
-webkit-box-shadow membuat shadow pada Safari and Chrome
-box-shadow digunakan pada Opera

Maka dengan mengetahui perbedaan fungsi kode CSS 3 tersebut, bisa jadi angka-angkanya menjadi tidak sama, karena setiap browser berbeda dalam menampilkannya saat diakses di internet.

Tutorial yang singkat dan jelas ini saya peroleh dari blog yang sayangnya akses dari negara kita di blokir oleh pemiliknya :(
But nevertheless thank you for http://unstuffeddesign.com/ I like your tutorial’s

Nah, demikian saja tutorial mengenal kode CSS3 untuk setiap browser dengan membuat box shadow. Dari kode dasar tersebut, maka akan lebih memudahkan saat menuliskan kode untuk mempercantik box, border, text, sudut melingkar dan lain-lain. Semoga bermanfaat. Maaf dan terima kasih.

Share to : Facebook | Twitter | Digg | Google | Technorati | Stumbleupon | Delicious | Reddit |

Artikel terkait :

Random Posts :

Leave a Comment