Bereksperimen dalam membuat blog keren adalah salah satu usaha seorang blogger dengan beranekaragam cara, diantaranya dengan menggunakan CSS3 Ribbon Snippets dalam blog. Berikutlah jenis-jenis ribbon snippets yang telah saya eksperimenkan untuk Anda, jika Anda mau pasang blog silahkan copy kode-kode di bawah ini :
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>
.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>
.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>
Selamat bereksperimen sendiri..!!
Blogger
Google+
Facebook
Twitter