Membuat bayangan dengan CSS ternyata sangatlah mudah. Bayangan bisa memberikan efek tiga dimensi pada elemen. Berikut cara membuat bayangan pada css.

Dua Parameter Pertama

Untuk membuat bayangan pada css, digunakan property box-shadow. Box-shadow minimal memiliki dua parameter, paremeter pertama adalah posisi x (horizontal) bayangan terhadap elemen, dan parameter kedua adalah posisi y (vertikal) bayangan terhadap elemen.

Jika posisi-x bernilai positif maka bayangan berada di sebelah kanan elemen utama. Dan jika bernilai negatif maka bayangan berada pada sebelah kiri elemen utama.

Jika posisi-y bernilai positif maka bayangan berada di sebelah bawah elemen utama. Dan jika bernilai negatif maka bayangan berada pada sebelah atas elemen utama.

Berikut adalah contoh penggunaan box-shadow dengan 2 parameter.

.contoh { box-shadow: 10px 5px; }

Berikut hasilnya

Dapat dilihat diatas dimana posisi bayangan diatur 10px sebelah kanan dan 5px sebelah bawah

Warna Bayangan

Warna yang tidak diatur akan menampilkan warna defalut, warna default mengikuti warna text/tulisan pada elemen. Misalnya pada contoh berikut, warna tulisan diubah menjadi warna biru.

.contoh { color: blue; box-shadow: 10px 5px; }

Berikut hasilnya

Untuk mengubah warna bayangan tanpa harus mengubah warna text/tulisan, anda bisa menuliskannya langsung pada paramater box-shadow. Parameter warna dituliskan setelah paremeter posisi seperti contoh berikut.

.contoh { box-shadow: 10px 5px red; }

Berikut hasilnya

Bayangan Blur

Bayangan yang dihasilkan pada contoh sebelumnya adalah bayangan dimana blur-nya adalah 0 atau tidak ada blur sama sekali. Untuk memberinya blur, parameter blur harus diberikan nilai. Letak parameter blur adalah setelah parameter posisi x-y dan sebelum parameter warna.

Berikut adalah contoh pengaturan paramater blur.

.contoh { box-shadow: 10px 5px 3px red; }

Berikut hasilnya

Penyebaran Bayangan

Jika anda ingin membuat bayangan menjadi lebih besar dari element utama, anda bisa menggunakan paramater ini. Parameter ini secara default bernilai 0, dimana ukuran bayangan sama dengan ukuran elemen utama.

Letak parameter bayangan adalah setelah parameter blur dan sebelum parameter warna.

Berikut adalah contoh penulisan box-shadow dengan parameter penyebaran. Parameter posisi dan paramater blur di nol-kan sehingga murni yang terlihat adalah pengaruh dari parameter penyebaran ini.

.contoh { box-shadow: 0px 0px 0px 10px red; }

Berikut hasilnya

Dapat dilihat bahwa bayangan menyebar 10px ke masing-masing arah.

Inset

Paramater ini membuat bayangan berada di bagian dalam elemen. Letak parameter ini adalah setelah paramater posisi, blur, dan penyebaran. Dapat ditempatkan sebelum atau sesudah parameter warna.

Berikut contoh penulisan dimana parameter ini ditempatkan tepat setelah parameter warna.

.contoh { box-shadow: 0px 0px 10px 0px grey inset; }

Berikut hasilnya

Lihat juga penggunaan animation-timing-function ini pada pembuatan animasi fade-in dan juga animasi pindah tempat

Sekian, Semoga bermanfaat