Tutorial CSS Box Shadow - Cara Menambahkan Drop Shadow ke Semua Elemen HTML

Kita dapat menambahkan drop shadow ke elemen HTML apa pun menggunakan properti CSS box-shadow. Begini caranya.

Menambahkan Drop Shadow Dasar

Pertama-tama, mari kita siapkan beberapa elemen HTML dasar untuk menambahkan bayangan drop kita ke:

 Box1 Box2 Box3 

Kemudian tambahkan beberapa CSS dasar:

p { padding: 10px; } .box { padding: 20px; width: 50%; margin: 30px auto; background: #000; color: #fff; }

Hasilnya hanya tiga kotak hitam yang akan mudah bagi kita untuk menambahkan bayangan ke dengan memanggil id unik mereka:

Penyiapan elemen HTML

Untuk menambahkan bayangan dasar, mari gunakan box-shadowproperti pada Kotak 1:

/* offset-x | offset-y | color */ #box1 { box-shadow: 6px 12px yellow; }
Menambahkan drop shadow dasar ke Kotak 1

Kami memiliki 3 parameter di sini. 2 yang pertama masing-masing adalah x-offset dan y-offset. Mereka mengatur lokasi bayangan jatuh.

Offset relatif terhadap asal, yang dalam HTML selalu berada di pojok kiri atas elemen. X-offset positif akan menggerakkan bayangan ke kanan, dan offset-y positif akan menggerakkan bayangan ke bawah.

Parameter ketiga adalah warna bayangan drop Anda.

Perlu diingat bahwa meskipun kami menggunakan elemen di sini, box-shadowproperti juga dapat diterapkan ke elemen HTML lainnya.

Menambahkan Radius Blur

Jika kita ingin bayangan terlihat sedikit lebih realistis, kita ingin bereksperimen dengan blur-radiusparameter.

Parameter ini mengontrol seberapa banyak memburamkan bayangan sedemikian rupa sehingga menjadi lebih besar dan lebih terang. Mari terapkan ke Kotak 2:

/* offset-x | offset-y | blur-radius | color */ #box2 { box-shadow: 6px 12px 4px red; }
Menambahkan radius buram ke Kotak 2

Nilai 4px mengatur radius blur untuk diterapkan pada drop shadow kita.

Menambahkan Radius Spread

Jika kita ingin mengontrol ukuran bayangan, kita dapat menggunakan spread-radiusparameter yang mengontrol seberapa besar bayangan tumbuh atau menyusut.

Mari tambahkan radius sebaran 8px ke Kotak 2:

/* offset-x | offset-y | blur-radius | spread-radius | color */ #box2 { box-shadow: 6px 12px 4px 8px red; }
Menambahkan radius sebaran selain buram ke Kotak 2

Ingat urutan parameter ini!

Menggabungkan Beberapa Bayangan dalam Satu Properti

Jika kita ingin menjadi mewah, kita dapat menambahkan beberapa bayangan jatuh ke elemen menggunakan satu box-shadowproperti.

Mari lakukan itu dengan Kotak 3 dengan secara bersamaan menambahkan drop shadow biru dan hijau:

/* Any number of shadows, separated by commas */ #box3 { box-shadow: 6px 12px 2px 2px blue, -6px -12px 2px 2px green; }
menggabungkan beberapa bayangan jatuh

Bonus: Buat Bayangan Inset

Meskipun tidak akan membuat bayangan jatuh, insetparameternya juga dapat digunakan dengan box-shadowproperti.

Seperti namanya, parameter ini membuat bayangan inset (yaitu bayangan di dalam kotak).

The insetparameter dapat ditempatkan baik di awal atau akhir

box-shadowProperti. Di sini kami mendemonstrasikan penggunaannya dengan blockquoteelemen.

HTML:

 The key to success is to start before you're ready. 

— Marie Forleo

CSS:

blockquote { width: 50%; margin: 50px auto; padding: 20px; font-size: 24px; box-shadow: inset 10px 5px black; }
Buat bayangan inset

Tentu saja Anda dapat menambahkan beberapa blur dan spread untuk meningkatkan bayangan, atau bahkan beberapa bayangan:

 box-shadow: inset 10px 5px 25px 5px black, 5px 5px 12px 2px black;
Bayangan sisipan dikombinasikan dengan bayangan jatuh

Dengan box-shadowproperti tersebut, kita dapat dengan mudah membuat elemen pada halaman web menonjol untuk menciptakan efek pencahayaan 3D yang bagus.

Jika Anda ingin bereksperimen sendiri, berikut ini kode pena yang saya buat dengan contoh yang digunakan dalam tutorial ini.

Bermain-main dan lihat apa yang bisa Anda dapatkan!

Ingin Melihat Lebih Banyak Tip dan Pengetahuan Pengembangan Web?

  • Berlangganan buletin mingguan saya
  • Kunjungi blog saya di 1000 Mile World
  • Ikuti saya di Twitter