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
Properti | Kegunaanya |
---|---|
box-shadow | Digunakan untuk memberikan bayangan pada box atau elemen |
text-shadow | Digunakan untuk memberikan bayangan pada text atau tulisan |