Border Bottom Emboss Dengan CSS

Membuat satu garis border (border-bottom) dengan gaya emboss akan terlihat lebih baik dari pada garis border biasa dalam hal ini warna menjadi faktor utama

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.



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.

4 comments:

  1. Thanks , I have recently been looking for info approximately this subject
    for a long time and yours is the best I've came upon till now. However, what about the bottom line? Are you certain about the source?

    Feel free to visit my blog assfucked.org

    ReplyDelete
  2. apa itu adalah border yang agan pakai di template ini ??
    apa cuma bisa diterapin di property border-bottom saja ? :id

    ReplyDelete
    Replies
    1. pada intinya kita itu hanya menggabungkan dua buah warna yang berbeda, dalam hal ini properti border dan box-shadow untuk bisa menghasilkan satu garis yang terlihat seperti emboss

      Delete
    2. terima kasih mas , sangat membantu :tp

      Delete

Terima Kasih Atas Komentar Anda

  • +Bagikan
  • +Admin