Eksperimen CSS3 Ribbon Snippets ~ Blog Alvin Warasi

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>

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>

Selamat bereksperimen sendiri..!!

Advertise

Contact Me

300x250

Advertise

Contact Me

300x250

1 Comments

Balas

Randi96 28 November 2018 at 11:48

Thanks infonya gan, menarik dan sangat bermanfaat untuk eksperimen css3 ribbon snippets. Nanti saya akan mencoba tutorialnya.
Janga lupa kunjugi blog saya https://randi96.mahasiswa.atmaluhur.ac.id/
dan website kampus saya juga ya http://www.atmaluhur.ac.id/

Silakan Tinggalkan Komentar Anda!
Saya sangat menghargai atas pertanyaan dan komentar Anda, berkomentarlah dengan baik dan sopan.
Dilarang menyertakan link aktif, iklan, atau titip link...
Terima Kasih Sudah Berkomentar..

Konversi KodeTutup Konverter!ForumEmoticon

Terima kasih telah berkomentar