Membuat Ribbon Menggunakan CSS Tanpa Image
Dalam seni desain web, kita sering menjumpai style web yang menggunakan pita (Ribbon. dan kebanyakan dari desain tersebut menggunakan image.
kali ini saya akan coba share, bagaimana membuat pita (Ribbon) dengan hanya menggunakan teknik CSS.
Struktur Awal
anggap saja sekarang kita mempunyai div class wrapper dengan padding:20px. padding pada CSS berfungsi memberi jarak antar layar browser dengan bidang web kita.
Style Element
nah sekarang kita hanya perlu menambahkan element untuk membuat pita. kita hanya perlu satu element, sebagai contoh h1 dengan sedikit memberikan sentuhan CSS Style.
h1 { margin: 0 -30px; }
kalo dilihat dari browser, tampak h1 akan sedikit keluar dari div wrapper yang kita buat.
sekarang saatnya membuat pita. silahkan copy CSS dibawah ini :
h1{
text-align: center;
position: relative;
color: #fff;
margin: 0 -30px 30px -30px;
padding: 10px 0;
text-shadow: 0 1px rgba(0,0,0,.8);
background: #5c5c5c;
background-image: -moz-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: -webkit-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
-moz-box-shadow: 0 2px 0 rgba(0,0,0,.3);
-webkit-box-shadow: 0 2px 0 rgba(0,0,0,.3);
box-shadow: 0 2px 0 rgba(0,0,0,.3);
}
h1:before, h1:after
{
content: '';
position: absolute;
border-style: solid;
border-color: transparent;
bottom: -10px;
}
h1:before
{
border-width: 0 10px 10px 0;
border-right-color: #222;
left: 0;
}
h1:after
{
border-width: 0 0 10px 10px;
border-left-color: #222;
right: 0;
}
ketika semua sudah di copy, pita akan terbentuk.
jika, masih bingung.. saya sudah buat file html sederhana dengan CSS Ribbon yang sudah jadi.
Download CSS Ribbon : css_ribbon
thanks for Red Team Design
Source http://www.red-team-design.com/css-ribbons