header iklan
Cara Membuat Box Shadow Dengan CSS di PHP dan Semua Propertinya
Penulis : Andriansyah |
Selasa 04 July 2023, 14:52 WIB |
Cara Membuat Box Shadow Dengan CSS di PHP dan Semua Propertinya - WASTU.ID

   b. v-shadow: Menentukan jarak vertikal bayangan dari elemen. Nilai positif akan menggeser bayangan ke bawah, sementara nilai negatif akan menggesernya ke atas.

   c. blur: Menentukan tingkat kebluran bayangan. Semakin besar nilai blur, semakin blur bayangannya.

   d. spread: Menentukan seberapa luas bayangan diperluas. Nilai positif akan memperluas bayangan, sementara nilai negatif akan menciutkannya.

   e. color: Menentukan warna bayangan. Anda dapat menggunakan nilai warna CSS seperti nama warna, kode hex, atau RGB.

3. Contoh Penggunaan Box Shadow

Berikut adalah beberapa contoh penggunaan properti box-shadow:

   a. Efek Bayangan Sederhana:

      .box {

        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);

      }

      Pada contoh di atas, kita memberikan efek bayangan sederhana dengan jarak horizontal 2px, jarak vertikal 2px, kebluran 4px, dan warna hitam dengan transparansi 0.4.

   b. Efek Bayangan Lebih Kompleks:

      .box {

        box-shadow: 0 0 10px rgba(0, 0, 0, 0.8),

                    0 0 20px rgba(0, 0, 0, 0.4),

                    0 0 30px rgba(0, 0, 0, 0.2);

1
3
4
Cek Berita dan Artikel yang lain di Google News
TAGS :
#box shadow
#css
TERPOPULER
TERPOPULER