Bentuk Dan Ragam Ribbon Box Berbagai Efek

Bentuk Dan Ragam Ribbon Box Berbagai Efek - Sama halnya saat anda membuat border pada halaman posting, memodifikasi garis tepi pada widget sidebar blog. Dipertemuan kali ini SAHABAT BLOGGER 77 kembali berbagi 8 Model Bentuk Dan Ragam Ribbon Box Berbagai Efek dengan CSS seperti ini:

.ribbon-box-1 {
  font:bold 16px Cambria,Georgia,Times,Serif;
  color:#fff;width:60%;
  padding:0px 30px;background:#3B5998;
  position:relative;line-height:48px;
  margin:100px auto;}

.ribbon-box-1:after {
  content:"";position:absolute;
  top:0px;left:100%;width:0px;
  height:0px;border:24px solid #3B5998;
  border-right-color:transparent;}

//ribbon box style 2
.ribbon-box-2 {
  font:bold 16px Cambria,Georgia,Times,Serif;
  color:#fff;width:60%;
  padding:0px 30px;background-color:orange;
  position:relative;line-height:48px;
  margin:100px auto;}

.ribbon-box-2:before {
  content:"";position:absolute;
  top:0px;right:100%;width:0px;
  height:0px;border:24px solid orange;
  border-left-color:transparent;}

.ribbon-box-2:after {
  content:"";position:absolute;
  top:0px;left:100%;width:0px;
  height:0px;border:24px solid transparent;
  border-left-color:orange;}

//ribbon box style 3
.ribbon-box-3 {
  font:bold 16px Cambria,Georgia,Times,Serif;
  color:#fff;width:60%;
  padding:0px 30px;background:#CEB754;
  position:relative;left:-10px;
  line-height:48px;margin:100px auto;}

.ribbon-box-3:before {
  content:"";position:absolute;
  top:100%;left:0px;width:0px;
  height:0px;border-width:5px;
  border-style:solid;
  border-color:#A28E34 #A28E34 transparent transparent;}

.ribbon-box-3:after {
  content:"";position:absolute;
  top:0px;left:100%;width:0px;
  height:0px;border:24px solid #CEB754;
  border-right-color:transparent;}

//ribbon box style 4
.ribbon-box-4 {
  font:bold 16px Cambria,Georgia,Times,Serif;
  color:#fff;width:60%;
  padding:0px 30px;background:#080;
  position:relative;line-height:48px;
  margin:100px auto;text-align:center;
  border-top:4px double #fff;}

.ribbon-box-4:before {
  content:"";position:absolute;
  top:100%;left:0px;width:0px;
  height:0px;border-width:8px;
  border-style:solid;
  border-color:#080 #080 transparent transparent;}

.ribbon-box-4:after {
  content:"";position:absolute;
  top:100%;right:0px;width:0px;
  height:0px;border-width:8px;
  border-style:solid;
  border-color:#080 transparent transparent #080;}

//ribbon box style 5
.ribbon-box-5 {
  font:bold 16px Cambria,Georgia,Times,Serif;
  color:#fff;width:60%;
  text-align:center;padding:0px 30px;
  background-color:#900;
  background-image:-webkit-linear-gradient(top, #AF3605 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:-moz-linear-gradient(top, #AF3605 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:-ms-linear-gradient(top, #AF3605 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:-o-linear-gradient(top, #AF3605 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:linear-gradient(top, #AF3605 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  position:relative;
  line-height:48px;margin:100px auto;}

.ribbon-box-5:before {
  content:"";position:absolute;
  top:100%;left:0px;
  width:0px;height:0px;
  border-width:5px;border-style:solid;
  border-color:#76290A #76290A transparent transparent;}

.ribbon-box-5:after {
  content:"";position:absolute;
  top:100%;right:0px;
  width:0px;height:0px;
  border-width:5px;border-style:solid;
  border-color:#76290A transparent transparent #76290A;}
.ribbon-box-5 div {width:100%;}

.ribbon-box-5 div:before, .ribbon-box-5 div:after {
  content:"";position:absolute;
  width:0px;height:0px;
  border:24px solid #983912;
  top:10px;z-index:-1;}

.ribbon-box-5 div:before {
  border-left-color:transparent;
  right:100%;margin-right:-10px;}

.ribbon-box-5 div:after {
  border-right-color:transparent;
  left:100%;margin-left:-10px;}

//ribbon box style 6
.ribbon-box-6 {
  font:bold 12px Cambria,Georgia,Times,Serif;
  color:#fff;width:90px;
  text-align:center;padding:15px 0px;
  height:100px;background:#3B5998;
  position:relative;margin:20px auto 130px;}

.ribbon-box-6:after {
  content:"";position:absolute;
  top:100%;left:0px;width:0px;
  height:0px;border:45px solid #3B5998;
  border-bottom-color:transparent;}
.ribbon-box-6 h2 {margin:0px 10px;font-size:30px;}

//ribbon box style 7
.ribbon-box-7 {
  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:20px auto 100px;}

.ribbon-box-7:before, .ribbon-box-7:after {
  content:"";position:absolute;
  bottom:-20px;left:-10px;
  width:0px;height:30px;
  border-width:20px 60px;border-style:solid;
  border-color:transparent #3B5998;}

.ribbon-box-7:after {bottom:10px;}
.ribbon-box-7 h2 {margin:0px 10px;font-size:30px;}

//ribbon box style 8
.ribbon-box-8 {
  font:bold 16px Cambria,Georgia,Times,Serif;
  color:#fff;width:50%;
  height:48px;text-align:center;
  padding:0px 30px;background-color:#900;
  background-image:-webkit-linear-gradient(top, #AF3605 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:-moz-linear-gradient(top, #AF3605 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:-ms-linear-gradient(top, #AF3605 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:-o-linear-gradient(top, #AF3605 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:linear-gradient(top, #AF3605 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  position:relative;
  line-height:48px;margin:100px auto;}

.ribbon-box-8:before {
  content:"";position:absolute;
  top:100%;left:0px;
  width:0px;height:0px;
  border-width:10px;border-style:solid;
  border-color:#76290A #76290A transparent transparent;}

.ribbon-box-8:after {
  content:"";position:absolute;
  top:100%;right:0px;
  width:0px;height:0px;
  border-width:10px;border-style:solid;
  border-color:#76290A transparent transparent #76290A;}

.ribbon-box-8 div {width:100%;height:100%;}
.ribbon-box-8 div:before, .ribbon-box-8 div:after {
  content:"";position:absolute;
  width:40px;height:100%;
  background:#983912;
  top:20px;z-index:-1;}

.ribbon-box-8 div:before {
  border-left-color:transparent;
  right:100%;margin-right:-20px;}

.ribbon-box-8 div:after {
  border-right-color:transparent;
  left:100%;margin-left:-20px;}

.ribbon-box-8 div div {width:100%;height:100%;}
.ribbon-box-8 div div:before, .ribbon-box-8 div div:after {
  content:"";position:absolute;
  width:50px;height:0px;
  background:transparent;
  border:25px solid #AF3605;
  top:10px;z-index:3;}

.ribbon-box-8 div div:before {
  border-left-color:transparent;
  margin-right:10px;}

.ribbon-box-8 div div:after {
  border-right-color:transparent;
  margin-left:10px;}

.ribbon-box-8 div div div {width:100%;height:100%;}
.ribbon-box-8 div div div:before, .ribbon-box-8 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;}

.ribbon-box-8 div div div:before {
  border-top-color:#76290A;
  border-left-color:#76290A;
  margin-left:20px;}

.ribbon-box-8 div div div:after {
  border-top-color:#76290A;
  border-right-color:#76290A;
  margin-right:20px;}

Sekedar untuk mempercantik tampilan blog dengan memperindah tampilan judul postingan, sehingga Cara Membuat Border Judul Artikel Blog sudah dibahas di artikel saya sebelumnya. Bentuk ribbon box kali ini bisa Anda jadikan alternatif untuk memberikan sedikit sentuhan pada tampilan halaman blog Anda sedikit berbeda dengan 8 Pilihan Ribbon Box seperti ini:

DEMO SHOW

RIBBON BOX STYLE 1

<div class="ribbon-box-1">
SAHABAT BLOGGER 77
</div>

RIBBON BOX STYLE 2

<div class="ribbon-box-2">
SAHABAT BLOGGER 77
</div>

RIBBON BOX STYLE 3

<div class="ribbon-box-3">
SAHABAT BLOGGER 77
</div>

RIBBON BOX STYLE 4

<div class="ribbon-box-4">
SAHABAT BLOGGER 77
</div>

RIBBON BOX STYLE 5

<div style="position:relative;z-index:1;">
<div class="ribbon-box-5">
<div>
SAHABAT BLOGGER 77
</div>
</div>
</div>

RIBBON BOX STYLE 6

<div class="ribbon-box-6">
July<h2>
03</h2>
SAHABAT BLOGGER 77
</div>

RIBBON BOX STYLE 7

<div class="ribbon-box-7">
July<h2>
03</h2>
SAHABAT BLOGGER 77
</div>

RIBBON BOX STYLE 8

<div style="position:relative;z-index:1;">
<div class="ribbon-box-8">
<div>
<div>
<div>
SAHABAT BLOGGER 77
</div>
</div>
</div>
</div>
</div>

Belum berminat? tak apa 😊 bantu kami dengan membagikan link ini ke teman, siapa tahu, justru mereka sedang mencari ini!