Border Bottom Emboss Dengan CSS

Cara Membuat Border Bottom Emboss Dengan CSS - Membuat satu garis emboss dengan css, ada macam jenis garis yang bisa dipergunakan untuk membuat suatu border untuk suatu ruang atau wadah dalam template, baik itu untuk ruang header, sidebar, posting, footer atau bagian-bagian lainnya yang menggunakan properti border.

Salah satu jenis garis border yang biasa dipergunakan adalah jenis garis border Solid, garis border solid ini bisa kita buat seperti masuk kedalam membentuklekukan atau bisa disebut Emboss. Dilihat dari tampilannya garis emboss ini lebih bagus daripada garis (border) biasa.

Untuk membentuk garis emboss ini membutuhkan 3 properti yang saling mendukung, yaitu background, border dan box-shadow.

Membuatnya tidak begitu sulit kita hanya membutuhkan properti yang disebut diatas (properti background merupakan bagian lain), yang sulit adalah menentukan perpaduan warna antara warna background, warna border dan warna box-shadow yang sesuai untuk menghasilkan satu garis emboss yang baik.

① Berbagai macam jenis garis border

Pembuatan Garis Border-Bottom Emboss

.selektor {
 background:#---;
}

Warna background template atau background ruang yang akan disi dengan garis emboss merupakan faktor utama dalam membentuk emboss yang baik (untuk properti background ini merupakan properti terpisah dengan properti border dan box-shadow).

.selektor {
 border-bottom:1px solid #---;
}

Border bawah dengan ketebalan 1px dengan jenis garis border solid dengan warna #---, merupakan garis warna yang akan disatukan dengan garis warna box-shadow, sesuaikan ketebalan garis border dan warna border.

.selektor {
 box-shadow:0px 1px 0px #---;
}

Box-shadow dengan nilai horizontal length 0px, nilai vertical length 1px = memberi nilai bagian bawah shadow dengan ketebalan 1px dan blur radius dengan nilai 0px (tidak memiliki nilai ketebalan blur) dengan warna #---.

CSS Border Emboss

Css garis bawah (border-bottom) emboss:

.selektor {
 border-bottom:1px solid #---;
 box-shadow:0px 1px 0px #---;
}

Dengan css tersebut akan menghasilkan satu garis border-bottom (garis bawah) dengan gaya emboss, sedangkan properti background tidak dicantumkan karena properti background merupakan background dari ruang border emboss itu sendiri.

Atur nilai warna pada garis shadow dengan warna yang lebih muda dari warna background dan buatlah nilai border-bottom dengan nilai warna yang lebih tua dari warna background.

Demo hasil kurang lebih seperti pada subtitle garis border diatas tanpa segitiga, maaf kalau tidak mencantumkan nilai warna pada properti, karena jika diterapkan pada template yang kalian pakai mungkin tidak akan cocok dengan background yang dipergunakan.