Bayangan Kotak CSS
Properti bayangan kotak CSS
Properti CSS box-shadow
digunakan untuk menerapkan satu atau lebih bayangan ke sebuah elemen.
Tentukan Horizontal dan Vertikal Shadow
Dalam penggunaannya yang paling sederhana, Anda hanya menentukan bayangan horizontal dan vertikal. Warna default bayangan adalah warna teks saat ini.
Contoh
Tentukan bayangan horizontal dan vertikal:
div
{
box-shadow: 10px 10px;
}
Tentukan Warna untuk Bayangan
Parameter color
menentukan warna bayangan.
Contoh
Tentukan warna untuk bayangan:
div
{
box-shadow: 10px 10px grey;
}
Tambahkan Efek Buram ke Bayangan
Parameter blur
mendefinisikan radius blur. Semakin tinggi angkanya, semakin kabur bayangannya.
Contoh
Tambahkan efek blur ke bayangan:
div
{
box-shadow: 10px 10px 5px grey;
}
Atur Spread Radius of the Shadow
Parameter spread
mendefinisikan radius penyebaran. Nilai positif meningkatkan ukuran bayangan, nilai negatif mengurangi ukuran bayangan.
Contoh
Atur radius penyebaran bayangan:
div
{
box-shadow: 10px 10px 5px 12px grey;
}
Setel Parameter sisipan
Parameter inset
mengubah bayangan dari bayangan luar (awal) menjadi bayangan dalam.
Contoh
Tambahkan parameter sisipan:
div
{
box-shadow: 10px 10px 5px grey inset;
}
Tambahkan Banyak Bayangan
Sebuah elemen juga dapat memiliki banyak bayangan:
Contoh
div
{
box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}
Kartu-kartu
Anda juga dapat menggunakan box-shadow
properti untuk membuat kartu seperti kertas:
1
1 Januari 2021
Hardanger, Norwegia
Contoh
div.card
{
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0,
0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align:
center;
}
CSS Shadow Properties
The following table lists the CSS shadow properties:
Property | Description |
---|---|
box-shadow | Adds one or more shadows to an element |
text-shadow | Adds one or more shadows to a text |