Blog

Border Shadow Hanya Bagian Bawah (Garis Bawah Berbayang) Dengan CSS

 

Border Shadow Hanya Bagian Bawah (Garis Bawah Berbayang) Dengan CSS

CSS     1 bulan yang lalu


Menambahkan garis bawah tetapi blur seperti bayangan dengan box-shadow di CSS.

Sebenarnya kita bisa membuat shadow (bayangan) gak cuman dibawah, tapi lebih sulit mengatur secara spesifik daripada semuanya. 

Apaan sih, ribet gitu teorinya. Ok kita langsung saja kenalan sama box-shadow ya...

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

box-shadow memiliki properti seperti diatas. Mari kita kupas satu-persatu.

none: Tidak ada bayangan yang ditampilkan.
h-offset: Offset horizontal bayangan. Nilai positif menempatkan bayangan di sisi kanan kotak, nilai negatif menempatkan bayangan di sisi kiri kotak.
v-offset: Offset vertikal bayangan. Nilai positif menempatkan bayangan di bawah kotak, nilai negatif menempatkan bayangan di atas kotak.
blur: Semakin tinggi angkanya, semakin kabur bayangannya.
spread: Nilai positif meningkatkan ukuran bayangan, nilai negatif mengurangi ukuran bayangan.
color: Nilai default adalah warna teks.
inset: Mengubah bayangan dari bayangan luar (outset) menjadi bayangan dalam
initial: Mengatur properti ini ke nilai standarnya.
inherit: Mewarisi properti ini dari elemen induknya.

.contoh {
  border: 1px solid;
  padding: 10px;
  box-shadow: 10px 10px 8px #888888;
}

Diatas kita membuat class "contoh" memiliki atribut shadow dengan properti margin ke arah kanan sebesar 10px, ke arah bawah 10px, tingkat blur 8px dan warga #888888. Maka akan tampil seperti berikut:

Ok, mudah bangen kan ya? Sekarang gimana caranya kita buat hanya bagian bawah?

.contoh {
  -webkit-box-shadow: 0 4px 6px -6px #222;
  -moz-box-shadow: 0 4px 6px -6px #222;
  box-shadow: 0 4px 6px -6px #222;
}

Sipp kan? Selamat berekplorasi dengan box-shadow ya...


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