Cara Membuat Efek Bayangan Pada Teks dan Box Dengan CSS

Cara Membuat Efek Bayangan Pada Teks dan Box Dengan CSS

Kali ini saya akan share cara membuat efek bayangan pada teks dengan CSS. Untuk membuat efek bayangan pada teks kita gunakan property text-shadow dan box-shadow. Lalu, apa perbedaan di antara keduanya?
Sesuai namanya, box-shadow digunakan untuk membuat efek bayangan pada kotak atau elemen kontainer. Sedangkan, text-shadow digunakan untuk memberi efek bayangan pada teks.

Nah, Anda bisa lihat code di bawah ini.

Di code tersebut saya membuat sebuah kotak dengan menggunakan tag div yang dibumbui CSS. Tidak ada bayangan? Tenang, gunakan property box-shadow untuk membuat bayangan di sekitar kotak.
Coba lihat code ini.

Setelah saya tambahkan property box-shadow beserta value-nya, maka hasilnya akan menjadi seperti.

Lalu, bagaimana caranya agar bayangannya berada di atas dan samping kiri kotak? Perhatikan code di bawah ini dan lihat hasilnya.

Hasil

Sama halnya dengan box-shadow, text-shadow juga memiliki value-value yang sama.
Coba perhatikan code di bawah ini.

Maka code tersebut akan menghasilkan.

Seperti itulah cara membuat efek bayangan pada teks dan box menggunakan CSS.
box-shadow dan text-shadow sendiri memiliki 4 value, yaitu :

text-shadow: 5px 5px 10px red;

- Value pertama yang berwarna merah merupakan value untuk mengatur arah horizontal.
- Value kedua yang berwarna biru merupakan value untuk mengatur arah vertikal.
- Value ketiga yang berwarna hijau merupakan value untuk mengatur tingkat keburaman (blur) pada bayangan.
- Value keempat atau terakhir untuk mengatur warna bayangan.

Sepertinya itu yang dapat saya sampaikan kali ini. Semoga tutorial kali ini bermanfaat.