Pada kesempatan saya kali ini akan menjelaskan cara membuat box-shadow di css. Box-shadow adalah property dimana untuk membuat efek bayangan baik untuk kotak, text, gambar, dll. Di setiap bayangan tersebut dapat didefinisikan oleh satu sampai lima komponen, berikut diantara nya:

  1. nilai horizontal offset [horizontal offset]
  2. nilai diimbangi vertikal [vertikal offset]
  3. radius blur opsional [blur radius]
  4. penyebaran radius opsional [spreed radius]
  5. warna opsional [color]
Untuk penulisan nya, seperti contoh di bawah ini:

Drop shadow dapat digunakan sebagai pengurang ke kiri atau kanan, dan ke atas atau ke bawah dari sisi elemen, dan drop shadow juga dapat dibuat di dalam elemen sebagai bayangan yang menciptakan ilusi kedalaman di dalam elemen tersebut,hal ini dapat dilakukan dengan menambahkan kata kunci inset pada delcaration tersebut. Untuk penulisan nya, seperti contoh gambar di bawah ini:

Berikut penjelasan dari sintax di atas:

Inset adalah opsional dan dapat menentukan apakah drop shadow yang dibuat terlihat di belakang elemen atau di dalamnya. Jika Inset tersebut digunakan, maka dapat mengubah drop shadow untuk bayangan luar dan untuk bayangan dalam.

<offset-x>

Offset-x adalah nilai untuk memberikan offset bayangan horizontal dan menentukan jarak dimana bayangan digeser ke kiri atau kanan dari suatu elemen, nilai positif yang menentukan bayangan ke kanan, dan nilai negatif yang menentukan bayangan ke kiri.

<offset-y>

Offset-y adalah nilai untuk memberikan offset bayangan vertikal dan menentukan jarak dimana bayangan digeser ke bawah atau ke atas dari suatu elemen, nilai positif yang menentukan bayangan ke bawah, dan nilai negatif yang menentukan bayangan ke atas.

<blur-radius>

blur-radius adalah nilai untuk memberikan efek bayangan samar dan bersifat opsional, jika diatur ke 0 bayangan tersebut akan tajam, semakin tinggi angka maka akan semakin kabur.

<spread-radius>

spread-radius adalah nilai untuk memberikan efek bayangan dan bersifat opsional, nilai positif dapat meningkatkan ukuran bayangan tersebut, dan nilai negatif dapat mengurangi ukuran bayangan tersebut.

<color>

color adalah nilai untuk menentukan warna dari setiap bayangan dan bersifat opsional.

Untuk contoh penulisan yang lengkap, seperti di bawah ini:

Sampai di sini penjelasan cara membuat box-shadow di css, semoga bermanfaat.