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

CSS

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 meng-ekplorasi dengan box-shadow ya...

Artikel Terkait

Populer

;