CARA MEMBUAT EFFECT RIBBON DENGAN CSS
CARA MEMBUAT EFFECT RIBBON DENGAN CSS – Bagaimana cara membuat css effect ribbon untuk dipasang di blog sehingga tampilan blog kita bisa lebih cantik dan menarik. Lagi-lagi effect ribbon ini didapatkan saat iseng-iseng browsing sekalian menambah skill tentang css. Secara keseluruhan kode css tersebut menggunakan bantuan pseudo element :after, :before dan css triangle effect
 |
| effect ribbon dengan css |
TUTORIAL CARA MEMASANG EFFECT RIBBON DI BLOG
1. Log in ke bogger masuk template > edit html > proceed
2. Pilih tag atau div dari css template kamu yang akan diberi efek ribbon ini misalkan saja tag heading h1 .post-title
3. Masukan kode css position: relative; terlebih dahulu pada css div .post-title h1, .post-title h2 {}
4. Langsung saja berikut ini kode css effect ribbon, langsung aja copy code berikut ini di template blog kamu. setelah itu klik save template. untuk margin, padding, dan width silahkan disesuaikan sendiri
WARNA MERAH
.post-title h1, .post-title h2 {
background: #B62011;
color:#fff;
position:relative;
}
.post-title h1:after, .post-title h2:after, .post-title h1:before, .post-title h2:before {
content: '';
position: absolute;
height: 0;
width: 0;
}
.post-title h1:before, .post-title h2:before {
top: 100%;
left: 0px;
border-top: 7px solid #97010A;
border-left: 7px solid transparent;
}
.post-title h1:after, .post-title h2:after {
top: 100%;
right: 0px;
border-top: 7px solid #97010A;
border-right: 7px solid transparent;
}
WARNA BIRU
.post-title h1, .post-title h2 {
background: #0094af;
color:#fff;
position:relative;
}
.post-title h1:after, .post-title h2:after, .post-title h1:before, .post-title h2:before {
content: '';
position: absolute;
height: 0;
width: 0;
}
.post-title h1:before, .post-title h2:before {
top: 100%;
left: 0px;
border-top: 7px solid #007286;
border-left: 7px solid transparent;
}
.post-title h1:after, .post-title h2:after {
top: 100%;
right: 0px;
border-top: 7px solid #007286;
border-right: 7px solid transparent;
}
WARNA HIJAU
.post-title h1, .post-title h2 {
background: #a1af00;
color:#fff;
position:relative;
}
.post-title h1:after, .post-title h2:after, .post-title h1:before, .post-title h2:before {
content: '';
position: absolute;
height: 0;
width: 0;
}
.post-title h1:before, .post-title h2:before {
top: 100%;
left: 0px;
border-top: 7px solid #707a00;
border-left: 7px solid transparent;
}
.post-title h1:after, .post-title h2:after {
top: 100%;
right: 0px;
border-top: 7px solid #707a00;
border-right: 7px solid transparent;
}
WARNA ORANGE
.post-title h1, .post-title h2 {
background: #d45f00;
color:#fff;
position:relative;
}
.post-title h1:after, .post-title h2:after, .post-title h1:before, .post-title h2:before {
content: '';
position: absolute;
height: 0;
width: 0;
}
.post-title h1:before, .post-title h2:before {
top: 100%;
left: 0px;
border-top: 7px solid #994400;
border-left: 7px solid transparent;
}
.post-title h1:after, .post-title h2:after {
top: 100%;
right: 0px;
border-top: 7px solid #994400;
border-right: 7px solid transparent;
}
Tampilan demo sama seperti yang digunakan pada title blog ini, atau kamu bisa lihat langsung source aslinya. Kode yang saya pasang disini sudah saya modifikasi. Kalo kamu ingin tampilan seperti sumber silahkan lihat pola top, left, bottom, right, dan bordernya.
Sekian tutorial CARA MEMBUAT EFFECT RIBBON DENGAN CSS semoga bisa menambah unik tampilan blog kamu, dan jangan pernah menyerah untuk belajar sesuatu yang baru. Salam blogger
