CSS3 Ribbon Snippets
Ribbon 1
.ribbon1 {
font:bold 16px Cambria,Georgia,Times,Serif;
color:#fff;
width:60%;
padding:0px 30px;
background:#3B5998;
position:relative;
line-height:48px;
margin:50px auto;
}
.ribbon1:after {
content:"";
position:absolute;
top:0px;
left:100%;
width:0px;
height:0px;
border:24px solid #3B5998;
border-right-color:transparent;
}
<div class="ribbon1">Ribbon 1</div>
Ribbon 2
.ribbon2 {
font:bold 16px Cambria,Georgia,Times,Serif;
color:#fff;
width:60%;
padding:0px 30px;
background:#01943C;
position:relative;
line-height:48px;
margin:50px auto;
}
.ribbon2:before {
content:"";
position:absolute;
top:0px;
right:100%;
width:0px;
height:0px;
border:24px solid #01943C;
border-left-color:transparent;
}
.ribbon2:after {
content:"";
position:absolute;
top:0px;
left:100%;
width:0px;
height:0px;
border:24px solid transparent;
border-left-color:#01943C;
}
<div class="ribbon2">Ribbon 2</div>
Ribbon 3
.ribbon3 {
font:bold 16px Cambria,Georgia,Times,Serif;
color:#fff;
width:60%;
padding:0px 30px;
background:#CEB754;
position:relative;
left:-10px;
line-height:48px;
margin:50px auto;
}
.ribbon3:before {
content:"";
position:absolute;
top:100%;
left:0px;
width:0px;
height:0px;
border-width:5px;
border-style:solid;
border-color:#A28E34 #A28E34 transparent transparent;
}
.ribbon3:after {
content:"";
position:absolute;
top:0px;
left:100%;
width:0px;
height:0px;
border:24px solid #CEB754;
border-right-color:transparent;
}
<div class="ribbon3">Ribbon 3</div>
Ribbon 4
.ribbon4 {
font:bold 16px Cambria,Georgia,Times,Serif;
color:#fff;
width:60%;
padding:0px 30px;
background:#AF3605;
position:relative;
line-height:48px;
margin:50px auto;
text-align:center;
}
.ribbon4:before {
content:"";
position:absolute;
top:100%;
left:0px;
width:0px;
height:0px;
border-width:5px;
border-style:solid;
border-color:#76290A #76290A transparent transparent;
}
.ribbon4:after {
content:"";
position:absolute;
top:100%;
right:0px;
width:0px;
height:0px;
border-width:5px;
border-style:solid;
border-color:#76290A transparent transparent #76290A;
}
<div class="ribbon4">Ribbon 4</div>
Ribbon 5
.ribbon5 {
font:bold 16px Cambria,Georgia,Times,Serif;
color:#fff;
width:60%;
text-align:center;
padding:0px 30px;
background:#AF3605;
position:relative;
line-height:48px;
margin:50px auto;
}
.ribbon5:before {
content:"";
position:absolute;
top:100%;
left:0px;
width:0px;
height:0px;
border-width:5px;
border-style:solid;
border-color:#76290A #76290A transparent transparent;
}
.ribbon5:after {
content:"";
position:absolute;
top:100%;
right:0px;
width:0px;
height:0px;
border-width:5px;
border-style:solid;
border-color:#76290A transparent transparent #76290A;
}
.ribbon5 div {
width:100%;
}
.ribbon5 div:before, .ribbon5 div:after {
content:"";
position:absolute;
width:0px;
height:0px;
border:24px solid #983912;
top:10px;
z-index:-1;
}
.ribbon5 div:before {
border-left-color:transparent;
right:100%;
margin-right:-10px;
}
.ribbon5 div:after {
border-right-color:transparent;
left:100%;
margin-left:-10px;
}
<div style="position:relative;z-index:1;">
<div class="ribbon5"><div>Ribbon 5</div></div>
</div>
Dec
30
Ribbon 6
.ribbon6 {
font:bold 12px Cambria,Georgia,Times,Serif;
color:#fff;
width:90px;
text-align:center;
padding:15px 0px;
height:100px;
background:#3B5998;
position:relative;
margin:50px auto 130px;
}
.ribbon6:after {
content:"";
position:absolute;
top:100%;
left:0px;
width:0px;
height:0px;
border:45px solid #3B5998;
border-bottom-color:transparent;
}
.ribbon6 h2 {
margin:0px 10px;
font-size:30px;
}
<div class="ribbon6">Dec<h2>30</h2>Ribbon 6</div>
Dec
30
Ribbon 7
.ribbon7 {
font:bold 12px Cambria,Georgia,Times,Serif;
color:#fff;
width:100px;
text-align:center;
padding:15px 0px 15px;
height:150px;
background:#3B5998;
position:relative;
margin:50px auto 100px;
}
.ribbon7:before, .ribbon7:after {
content:"";
position:absolute;
bottom:-20px;
left:-10px;
width:0px;
height:30px;
border-width:20px 60px;
border-style:solid;
border-color:transparent #3B5998;
}
.ribbon7:after {
bottom:10px;
}
.ribbon7 h2 {
margin:0px 10px;
font-size:30px;
}
<div class="ribbon7">Dec<h2>30</h2>Ribbon 7</div>
Ribbon 8
.ribbon8 {
font:bold 16px Cambria,Georgia,Times,Serif;
color:#fff;
width:50%;
height:48px;
text-align:center;
padding:0px 30px;
background:#AF3605;
position:relative;
line-height:48px;
margin:50px auto;
}
.ribbon8:before {
content:"";
position:absolute;
top:100%;
left:0px;
width:0px;
height:0px;
border-width:10px;
border-style:solid;
border-color:#76290A #76290A transparent transparent;
}
.ribbon8:after {
content:"";
position:absolute;
top:100%;
right:0px;
width:0px;
height:0px;
border-width:10px;
border-style:solid;
border-color:#76290A transparent transparent #76290A;
}
.ribbon8 div {
width:100%;
height:100%;
}
.ribbon8 div:before, .ribbon8 div:after {
content:"";
position:absolute;
width:40px;
height:100%;
background:#983912;
top:20px;
z-index:-1;
}
.ribbon8 div:before {
border-left-color:transparent;
right:100%;
margin-right:-20px;
}
.ribbon8 div:after {
border-right-color:transparent;
left:100%;
margin-left:-20px;
}
.ribbon8 div div {
width:100%;
height:100%;
}
.ribbon8 div div:before, .ribbon8 div div:after {
content:"";
position:absolute;
width:50px;
height:0px;
background:transparent;
border:25px solid #AF3605;
top:10px;
z-index:3;
}
.ribbon8 div div:before {
border-left-color:transparent;
margin-right:10px;
}
.ribbon8 div div:after {
border-right-color:transparent;
margin-left:10px;
}
.ribbon8 div div div {
width:100%;
height:100%;
}
.ribbon8 div div div:before, .ribbon8 div div div:after {
content:"";
position:absolute;
width:0px;
height:0px;
background:transparent;
border:5px solid transparent;
top:100%;
margin-top:10px;
z-index:1;
}
.ribbon8 div div div:before {
border-top-color:#76290A;
border-left-color:#76290A;
margin-left:20px;
}
.ribbon8 div div div:after {
border-top-color:#76290A;
border-right-color:#76290A;
margin-right:20px;
}
<div style="position:relative;z-index:1;">
<div class="ribbon8"><div><div><div>Ribbon 8</div></div></div></div>
</div>
Labels: CSS, Eksperimen, Potongan
15 Comments:
Ini lah yang saya tunggu2,
karya ribbon emang bgus ui, mantep nih diterapin di blog ane :D
kalau dibuat miring gmn kang? diatas kan contohnya kan horizontal smua.
trims
Transformasi ⇒ http://jsfiddle.net/43eG7/52/
Kalo Penerapan Ke Title Positngan Gimana mas,,.?
assalamualaikum mas taufik, sepertinya itu hasil dari penerapan dari CSS psedo element ya?? keren banget mas..
Oiya mau tanya mas, itu kan buat yang tulisan biasa, gimana caranya sih agar bisa di pakai pada judul posting ataupun breadcrumb dengan ribbon seperti itu??? sebenernya saya coba sisipin kode ke situ, tapi gak berhasil malah ada tulisan template error gitu mas, mungkin mas taufik bisa bantu ... please mas.. aku tunggu jawabanya mas taufik ...,
Waalaikumsalam. Tinggal ganti teksnya dengan markup judul posting:
<div style="position:relative;z-index:1;">
<div class="ribbon8"><div><div><div>
<a expr:href='data:post.url'>
<data:post.title/>
</a>
</div></div></div></div>
</div>
ehm...sep deh,lumayan :)
Kalau dipasang di judul sidebar bagaimana ?
Tidak usah dijawab admin..
*Sudah bisa kok!
Terima kasih tips nya..
minta izin guna ya mas..
mas. kalo ingim memasang di sidebar gimana.,.??
Minta yang ribbon melengkung dong kang Taufik :D
Susah membuatnya :(
Nah itulah kang... :/
ane udah jelajah kemana-mana dengan harapan di dte dapet, tapi...
ya ternyata emang susah ya... :(
mantap pisan kang :D
Post a Comment
<< Home