Bentuk Dan Ragam Ribbon Box Berbagai Efek

Info informasi Bentuk Dan Ragam Ribbon Box Berbagai Efek atau artikel tentang Bentuk Dan Ragam Ribbon Box Berbagai Efek ini semoga dapat bermanfaat, dan menambah wawasan. Selamat Membaca! Jangan lupa dishare juga! Jika merasa artikel ini bermanfaat juga untuk orang lain.

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

Baca juga - Cara Membuat Text Box Keren Dengan Warna

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>

Demikian artikel tentang Bentuk Dan Ragam Ribbon Box Berbagai Efek ini dapat kami sampaikan, semoga artikel atau info tentang Bentuk Dan Ragam Ribbon Box Berbagai Efek ini, dapat bermanfaat. Jangan lupa dibagikan juga ya! Terima kasih banyak atas kunjungan nya.

Bersponsor
👉 Penerbit Content Placement Indonesia
👉 Artikel Kami Terbitkan Harga Terjangkau
👉 Jasa Content Placement
👉 Pasang Backlink Blogroll Premium
👉 Content Placement 50 Jaringan Backlink
👉 Jadi Agen Hanya 100 Ribu Selamanya
👉 Laptop Gaming Terbaik