HTML adalah bahasa yang digunakan untuk menyediakan struktur halaman web, dan CSS mengizinkan kita untuk menerapkan gaya pada elemen. Pada halaman web, nilai properti yang berbeda diatur untuk menerapkan gaya yang berbeda, seperti background-color, font-size, border, border-radius, dan box-shadow adalah salah satunya.

Blog ini akan membahas metode penerapan efek bayangan pada elemen HTML.

Bagaimana Cara Menjatuhkan Efek Bayangan pada Elemen HTML Menggunakan CSS?

“ bayangan kotak ” properti menambahkan bayangan di sekitar elemen di mana dua atau lebih nilai efek tambahan dapat dipisahkan dengan koma.

Sintaks properti box-shadow dijelaskan di bawah ini.

Sintaksis

bayangan kotak : tidak ada |h-offset v-offset blur menyebarkan warna | sisipan | awal | mewarisi ;

Deskripsi sintaks yang disebutkan di atas tercantum di bawah ini:

“ tidak ada ”: Ini adalah nilai default dari properti box-shadow.
“ h-offset ”: Nilai ini mewakili jarak horizontal.
“ v-offset ”: Nilai ini menentukan jarak vertikal.
“ mengaburkan ”: Nilai ketiga kabur. Memaksimalkan nilainya akan memaksimalkan efek blur.
“ menyebar ”: Nilai keempat mewakili penyebaran bayangan. Itu dapat menyimpan nilai positif atau negatif, di mana nilai positif meningkatkan penyebaran, dan nilai negatif menurunkannya.
“ warna ”: Nilai ini opsional, mewakili warna saat ini.
“ awal ”: Nilai ini menetapkan properti dari nilai awalnya.
“ mewarisi ”: Nilai ini mewarisi properti dari elemen induknya.
“ sisipan ”: Nilai inset digunakan untuk membuat bayangan di dalam kotak.

Mari kita lihat bagaimana efek bayangan terlihat melalui contoh praktis.

Contoh

Di file HTML, pertama, tambahkan “

”. Di dalam elemen

ini, tambahkan tag

dan
untuk menyediakan konten ke halaman web.

HTML

< div >

< h1 > Bayangan Kotak < / h1 >

< p > kotak-bayangan: 3px 8px < / p >

< / div >

Sekarang, terapkan properti CSS ke elemen HTML yang ditambahkan.

CSS

div {

bayangan kotak : 3px 8px ;

}

Elemen div diterapkan dengan properti “ bayangan kotak ” dengan nilai “ 3px 8px ”, yang mewakili offset horizontal dan offset vertikal.

Keluaran

Di bagian selanjutnya, elemen HTML akan diberi gaya dengan properti yang berbeda.

CSS

div {

berbatasan : 5px padat rgb ( 255 , 111 , 1 ) ;

bayangan kotak : 3px 8px 9px 4px #f4af1b ;

}

Berikut adalah properti CSS tambahan yang diterapkan pada elemen div:

“ berbatasan ” properti diberi nilai 5px solid rgb(255, 111,1) di mana 5px menunjukkan lebar perbatasan, padat mewakili gaya perbatasan, dan rgb(255, 111, 1) adalah warnanya.
“ bayangan kotak ” properti dengan nilai 3px 8px 9px 4px #f4af1b merepresentasikan h-offset sebagai 3px, v-offset sebagai 8px, blur sebagai 9px, spread sebagai 4px, dan #f4af1b menentukan warna.

Kode yang diberikan di atas akan menampilkan elemen div seperti yang ditunjukkan di bawah ini:

Sekarang, di bagian selanjutnya, buat dua kotak yang mewakili dua elemen div. Kami akan memberikan masing-masing dengan beberapa nilai bayangan kotak yang berbeda dan mengamati hasilnya.

HTML

= 'kotak1' >

> Bayangan Kotak >

> bayangan kotak : 3px 8px 9px 4px #f4af1b >

> > >

= 'kotak2' >

> Bayangan Kotak >

> bayangan kotak : 3px 8px 9px 4px #f4af1b >

>

Style box1 div

# kotak1 {

lebar : 40% ;

tinggi : 140px ;

berbatasan : 5px padat #ff9c83 ;

bayangan kotak : 8px 10px 15px 20px #807f7f ;

}

Di Sini:

“ # kotak1 ” digunakan untuk mengakses div dengan id box1.
“ lebar ” properti digunakan untuk pengaturan lebar elemen.
“ tinggi ” properti menyetel tinggi elemen.
“ berbatasan ” diberi nilai 5px solid #ff9c83 di mana 5px menunjukkan lebar perbatasan, padat mewakili gaya perbatasan, dan #ff9c83 adalah warnanya.
“ bayangan kotak Properti ” akan ditetapkan sebagai “ 8px 10px 15px 20px #807f7f ” di mana 8px adalah offset horizontal, 10px adalah offset vertikal, 15px adalah efek blur, 20px adalah efek sebar, dan #807f7f adalah warna bayangan.

Style box2 div

# kotak2 {

lebar : 40% ;

tinggi : 140px ;

berbatasan : 5px padat rgb ( 255 , 111 , 1 ) ;

bayangan kotak : sisipan 4px 8px #f4af1b ;

margin-kiri : 350px ;

}

Dapat diamati bahwa kita telah menata div box2 dengan properti yang sama:

Kiat Bonus: Menambahkan Banyak Bayangan pada Elemen HTML

“ bayangan kotak ” properti dapat digunakan untuk menambahkan beberapa efek bayangan ke elemen HTML. Ini dapat dilakukan dengan menggunakan koma di antara setiap bayangan seperti yang ditunjukkan pada contoh di bawah ini:

bayangan kotak : 6px 6px rgb ( 91 , 0 , 143 ) , 12px 5px rgb ( 201 , 8 , 8 ) , 16px 16px 8px rgb ( 226 , 213 , 29 ) ;

Seperti yang Anda lihat, banyak bayangan telah berhasil diterapkan:

Itu semua tentang penggunaan border shadow CSS.

Kesimpulan

“ bayangan kotak ” properti di CSS digunakan untuk menerapkan efek bayangan ke elemen HTML. Properti ini terutama terdiri dari dua nilai yaitu untuk offset horizontal dan offset vertikal, tetapi bisa ada beberapa nilai seperti untuk efek blur, efek spread radius, warna, dan lainnya. Selain itu, Anda juga dapat menambahkan banyak bayangan ke elemen dengan menggunakan koma di antara setiap properti box-shadow. Artikel ini telah menjelaskan properti box-shadow CSS dengan contoh-contoh praktis.

bayangan batas CSS