Cara membuat efek bayangan dengan CSS

Kegunaan CSS shadow atau bayangan

Pada CSS3 terdapat fitur baru yaitu shadow, yang berarti bayangan. Sesuai dengan namanya shadow digunakan untuk membuat bayangan pada elemen HTML. Properti shadow sendiri terdapat dua jenis, yaitu:

• box-shadow
• text-shadow

Box-shadow

Dengan properti box-shadow Anda bisa menggunakannya untuk membuat efek bayangan pada box seperti elemen <div> atau elemen yang lainnya. Dalam box-shadow Anda bisa menentukan arah horizontal, vertikal, blur, spread dan warna.

Sebagai contoh: box-shadow: 10px 20px 5px 15px blue;

Yang berarti Anda memberikan nilai:

• 10px – menentukan arah horizontal dari kiri ke kanan
• 20px – menentukan arah vertikal dari atas ke bawah
• 5px – menentukan tingkat transparansi atau blur
• 15px – menentukan penyebaran ukuran box shadow
• blue – memberikan warna pada box seperti blue atau biru

Anda bisa menentukan arah sebaliknya dengan memberikannya nilai negatif. Akan tetapi nilai negatif tidak didukung pada sebagian besar browser lama. Dalam penggunaan yang paling sederhana, Anda bisa menentukan arah horizontal dan arah vertikal tanpa memberikan nilai blur dan warna.

Berikut contoh box-shadow hanya menentukan arah horizontal dan vertikal:

#box {
    box-shadow: 10px 20px;
}

Berikut contoh box-shadow ditambah warna:

#box {
    box-shadow: 10px 20px blue;
}

Berikut contoh box-shadow ditambah blur:

#box {
    box-shadow: 10px 20px 5px blue;
}

Berikut contoh box-shadow ditambah spread:

#box {
    box-shadow: 10px 20px 5px 15px blue;
}

Text-shadow

Dengan properti text-shadow Anda bisa menggunakannya untuk membuat efek bayangan pada text atau tulisan. Dalam text-shadow Anda bisa menentukan arah horizontal, vertikal, blur dan warna.

Sebagai contoh: text-shadow: 2px 3px 5px yellow;

Yang berarti Anda memberikan nilai:

• 2px – menentukan arah horizontal dari kiri ke kanan
• 3px – menentukan arah vertikal dari atas ke bawah
• 5px – menentukan tingkat transparansi atau blur
• yellow – memberikan warna pada text seperti yellow atau kuning

Anda bisa menentukan arah sebaliknya dengan memberikannya nilai negatif. Akan tetapi nilai negatif tidak didukung pada sebagian besar browser lama. Dalam penggunaan yang paling sederhana, Anda bisa menentukan arah horizontal dan arah vertikal tanpa memberikan nilai blur dan warna.

Berikut contoh text-shadow hanya menentukan arah horizontal dan vertikal:

h2 {
    box-shadow: 1px 2px;
}

Berikut contoh text-shadow ditambah warna:

h2 {
    box-shadow: 2px 3px yellow;
}

Berikut contoh text-shadow ditambah blur:

h2 {
    box-shadow: 2px 3px 5px blue;
}

Multiple shadow

Anda juga bisa menambahkan multi shadow atau menambahkan beberapa bayangan pada text atau elemen. Untuk memisahkan satu sama lain menggunakan koma.

#box {
    box-shadow: 10px 10px 2px red, 20px 20px 2px blue;
}
h2 {
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

Daftar properti shadow