CSS Untuk Membuat Bayangan Hanya Bagian Bawah Saja

CSS

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

Artikel Terkait

Populer

;