» » Bentuk Dan Ragam Ribbon Box Berbagai Efek

3.7.14
7
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 image

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>

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Bentuk Dan Ragam Ribbon Box Berbagai Efek
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

Devy Indriyani

Join To Sahabat Blogger 77
Diposting oleh di 3.7.14
Label:

7 komentar

  1. Anonim03 Juli, 2014

    bikin pusing scriptnya $-)

    BalasHapus
    Balasan
    1. Devy03 Juli, 2014

      8 pilihan ribbon
      pilih ribbon 1, maka gunakan CSS ini

      Ex:-

      <style>
      .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;}</style>

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

      Hapus
  2. Yanto cungkup03 Juli, 2014

    semakin banyak pilihan malah pusing nih mbak

    BalasHapus
    Balasan
    1. Devy03 Juli, 2014

      model dan bentuk sengaja saya susun dalam satu perintah CSS, namun setiap CSS saya berikan tanda dengan teks berwarna ORANGE,
      so, tinggal dipilih saja mas ribbon mana yang cocok untuk digunakan


      jadi kalau dipilih semua,atau dicopy semua CSS-nya jadi makin pusing attuh,hehe

      Hapus
  3. Zona Nyaman03 Juli, 2014

    Masih bingung mas dengan script css ini.
    btw makasih infonya mas. :)

    BalasHapus
    Balasan
    1. Devy03 Juli, 2014

      padahal sudah saya buat widget profil author box pada tampilan blog ini, tetapi masih ada juga yang panggil mas,haddewhh..
      emang foto saya disana mirip sama cowok kali ya..haha..!!


      kalau begitu saya jadi ikutan bingung neh mbak +Nehand Bjn

      Hapus
    2. Aldino Sya05 Juli, 2014

      :))

      Hapus
:) :)) ;(( :-) =)) ;( ;-( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ $-) (b) (f) x-) (k) (h) (c) cheer
Silahkan KLIK gambar untuk melihat kode
TERIMA KASIH

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
Langganan: Posting Komentar (Atom)