Blog

CSS Untuk Membuat Bayangan Hanya Bagian Bawah Saja

 

CSS Untuk Membuat Bayangan Hanya Bagian Bawah Saja

CSS     11 bulan yang lalu


Bagaimana caranya membuat bayangan hanya bagian bawah pada elemen html menggunakan CSS?

Caranya sangat sederhana, gunakan box-shadow untuk membuatnya. Contoh:

#myDIV {
    background-color:yellow;
    width:200px;
    height:100px;
    box-shadow: 0 4px 2px -2px gray;
}

Penjelasan CSS diatas.

box-shadow: none | h-offset v-offset blur spread color | inset | initial | inherit;

Terdapat 5 pola yang bisa kita terapkan. Dari none hingga inherit.

  • none: nilai default, tidak akan ada bayangan. contoh: box-shadow:none;
  • h-offset: Bayangan horizontal. Nilai positif menempatkan bayangan di sisi kanan elemen, nilai negatif menempatkan bayangan di sisi kiri kotak. Nilai wajib diisi.
  • v-offset: Bayangan vertikal. Nilai positif menempatkan bayangan di sisi bawah elemen, nilai negatif menempatkan bayangan di sisi atas kotak. Nilai wajib diisi.
  • blur: Radius blur bayangan, semakin besar nilai yang di set akan semakin blur bayangan yang dibentuk. Nilai disini opsional.
  • spread: Radius sebaran bayangan, nilai positif akan memperbesar ukuran bayangan dan nilai negative akan mengurangi ukuran banyangan. Nilai disini opsional.
  • color: Warna bayangan. Nilai disini opsional.
  • inset: Mengubah bayangan dari bayangan luar (awal) menjadi bayangan didalam. Nilai disini opsional.
  • initial: Set properti ini ke nilai defaultnya.
  • inherit: Mewarisi properti ini dari elemen induknya.

Contoh

#myDIV {
    background-color:yellow;
    width:200px;
    height:100px;
    box-shadow:20px 20px 50px 10px pink inset;  
}

Yup, simple banget ya. Semoga bermanfaat


Kami membuat aplikasi pelayanan kependudukan dan administrasi untuk Desa dan Kelurahan. Demo bisa diakses di https://dash.klandesa.com. Silahkan gunakan email: demo@klandesa.com dan password: 123456