Berkenalan dengan CSS 3 Box Shadow

Posted in: Website & Blog |

css-box-shadow

Walau saya sudah lama menggunakan CSS 3 shadow (bayangan), kali ini baru ada kesempatan untuk menulis tentang shadow di CSS 3 (lately it’s a bit lazy to write actually). Dulu kita harus berjuang dalam membuat shadow untuk tampilan web, harus membuat gambar shadow untuk terlebih dahulu, di-slice/potong per bagian-bagian (kecuali kalau menerapkan CSS image sprite) kemudian simpan dalam PNG/GIF, saya masih ingat beberapa tahun lalu saya terkesan dengan DeviantArt yang menerapkan shadow dalam desainnya. Yah jaman sudah berubah, teknologi pun juga berubah, sekarang kita jauh dipermudah dengan CSS 3.

Syntax untuk shadow di CSS 3 adalah:

box-shadow: none | <shadow> [ , <shadow> ]*
/* dimana: */
<shadow> = inset? && [ <length>{2,4} && <color>? ]

Contohnya adalah sebagai berikut

box-shadow: 1px 3px 2px gray;

maka artinya adalah shadow dimana:

  • 1px merupakan nilai pertama berupa horizontal offset selebar 2 pixel, bila nilainya positif maka shadow akan berkembang (meluas) ke luar (ke arah kanan), bila negatif maka meluas ke dalam (ke arah kiri)
  • 3px merupakan nilai pertama berupa vertical offset selebar 2 pixel, bila nilainya positif maka shadow akan berkembang (meluas) ke luar (ke arah bawah), bila negatif maka meluas ke dalam (ke arah atas)
  • 2px merupakan nilai ketiga berupa jarak kekaburan (blur) warna sejauh 2 pixel, semakin besar maka akan semakin kabur sebaliknya semakin kecil maka semakin tegas warnanya.
  • gray merupakan nilai keempat berupa warna shadow, warna bisa terserah baik dalam format hexadecimal, RGB, atau CSS 3 RGBA (RGB dengan tingkat alpha transparency).

Nilai kelima (opsional) berupa letak shadow, di dalam (inner) box atau di luar (outer) box. Bila tidak dispesifikasikan maka defaultnya adalah di luar box, untuk membuat inner shadow, tambahkan syntax inset.

Bila di-render di web browser maka akan tampak seperti berikut:

test-shadow

Kita dapat melihat dengan style di atas, maka vertical offfset akan lebih lebar sehingga shadow bawah terlihat lebih lebar dibanding horizontal offset (shadow kanan).

Beberapa style shadow yang berbeda akan dapat membuat style shadow yang berbeda pula. Berikut ini adalah style dengan effect yang berbeda, penggunaan istilah akan saya sesuaikan dengan shadow di Photoshop.

Membuat Drop/Outer shadow

Untuk membuat drop shadow perhatikan horizontal dan vertical offset, di sini nilainya .

-webkit-box-shadow: 2px 2px 4px rgba(0,0,0,.5);
-moz-box-shadow: 2px 2px 4px rgba(0,0,0,.5);
box-shadow: 2px 2px 4px rgba(0,0,0,.5);

supaya terlihat seperti outer glow (terserah warna yang digunakan):

-webkit-box-shadow: 0px 0px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0px 0px 6px rgba(0,0,0,.5);
box-shadow: 0px 0px 6px rgba(0,0,0,.5);

Membuat Inner shadow

-webkit-box-shadow: 2px 2px 4px rgba(0,0,0,.5) inset;
-moz-box-shadow: 2px 2px 4px rgba(0,0,0,.5) inset;
box-shadow: 2px 2px 4px rgba(0,0,0,.5) inset;

supaya terlihat seperti inner glow:

-webkit-box-shadow: 0px 0px 6px rgba(0,0,0,.5) inset;
-moz-box-shadow: 0px 0px 6px rgba(0,0,0,.5) inset;
box-shadow: 0px 0px 6px rgba(0,0,0,.5) inset;

Bila di-render maka akan tampil seperti shadow di bawah ini:

Pada contoh terakhir kita dapat membuat beberapa shadow layer. Di sini saya membuat 2 layer, outer shadow dan inner shadow. Kita bisa membuat berapa banyak layer sekalipun dengan warna yang berbeda. Untuk membuat beberapa layer maka cukup setelah shadow pertama, tambahkan koma “,” dan shadow kedua, dst. Contohnya:

box-shadow: 0px 0px 6px rgba(0,0,0,.5),
            2px 2px 4px rgba(0,0,0,.5) inset;

Kompatibilitas Browser

Pada beberapa browser yang berbeda dan versi yang berbeda, biasanya akan terjadi masalah kompatibilitas browser. Kalau tidak mengecek maka tampilan di browser A dapat berbeda di browser B. Untuk shadow yang merupakan tambahan di CSS 3, maka untuk browser yang tidak support CSS 3 maka tidak bisa ditampilkan, tetapi biasanya ada vendor specific property.

Vendor specific property merupakan property yang tidak sesuai spesifikasi standar CSS dan tergantung dari browser tertentu. Untuk Mozilla Firefox biasanya diawali -moz-, Safari diawali -webkit-, Opera diawali -o-,  Internet Explorer diawali -ms-.

Untuk shadow ini, pada Firefox 3 gunakan -moz-box-shadow, untuk Safari gunakan -webkit-box-shadow. Untuk dukungan pada browser dengan versi berbeda tuliskan:

-webkit-box-shadow: 2px 2px 4px rgba(0,0,0,.5);
-moz-box-shadow: 2px 2px 4px rgba(0,0,0,.5);
box-shadow: 2px 2px 4px rgba(0,0,0,.5);

dimana vendor specific property dituliskan di atas sebelum property standar CSS.

Demo

Untuk demo lebih lengkap silakan klik tombol di bawah ini.

View Demo Download Demo




Speak Up!

Leave your own comment

Notify me of follow-up comments via e-mail (or subscribe here).




 

Share

Subscribe Feed

Email

Facebook

Twitter

Delicious

Digg

StumbleUpon

Google Buzz

Deviantart