Efek Pita Tiga Dimensi dengan CSS

Tabel Konten
  1. CSS 
  2. HTML 
  • Unsur-Unsur Pembangun 
  • Pita Tiga Dimensi

    Mungkin beberapa dari Anda tidak percaya bahwa gambar di atas adalah murni dibuat dengan CSS3. Ya, itu adalah salah satu pemanfaatan CSS Triangle yang menurut Saya paling sempurna:

    CSS 

    .rb-wrap {
      position:relative;
      z-index:1;
    }
    
    .ribbon {
      width:60%;
      font:normal bold 16px Arial,Sans-Serif !important;
      position:relative;
      background-color:#ba89b6;
      color:white;
      text-align:center;
      padding:1em 2em;
      margin:0 auto 3em;
      /* Saya tambahkan sedikit efek bayangan */ 
      -webkit-box-shadow:0 1px 1px rgba(0,0,0,.2); 
      -moz-box-shadow:0 1px 1px rgba(0,0,0,.2);
      box-shadow:0 1px 1px rgba(0,0,0,.2);
    }
    
    .ribbon:before,
    .ribbon:after {
      content:"";
      position:absolute;
      display:block;
      bottom:-1em;
      border:1.5em solid #986794;
      z-index:-1;
    }
    
    .ribbon:before {
      left:-2em;
      border-right-width:1.5em;
      border-left-color:transparent;
    }
    
    .ribbon:after {
      right:-2em;
      border-left-width:1.5em;
      border-right-color:transparent;
    }
    
    .ribbon .ribbon-content:before,
    .ribbon .ribbon-content:after {
      content:"";
      position:absolute;
      display:block;
      border-style:solid;
      border-color:#804f7c transparent transparent transparent;
      bottom:-1em;
    }
    
    .ribbon .ribbon-content:before {
      left:0;
      border-width:1em 0 0 1em;
    }
    
    .ribbon .ribbon-content:after {
      right:0;
      border-width:1em 1em 0 0;
    }

    HTML 

    <div class="rb-wrap">
      <p class="ribbon">
        <strong class="ribbon-content">Pita Tiga Dimensi</strong>
      </p>
    </div>

    Unsur-Unsur Pembangun 

    Gambar di bawah ini memang tidak begitu menjelaskan tentang bagaimana efek pita tersebut terbentuk, tapi setidaknya gambar-gambar ini bisa memberikan sedikit petunjuk:

    CSS3 3D Ribbon
    Efek Pita Tiga Dimensi dengan CSS

    5 Komentar

    • Unknown

      Kang Taufik, kalau menerapkan di judul blog gimana ?

    • Unknown

      Tanya kang,,
      itu kalau mau memperlebar ribbon:before gimana ya kang.?
      aku coba pakai width jadi, tapi ribbon-conten:before sama ribbon:before jadi ga pas..

      Satu lagi, itu kalau bawahnya saya lengkungin pakai apa ya.? apakah pakai border.? :)

      • Unknown

        border-widthnya kali yang harus digedein, bukan widthnya .. kalo mau pas ya di atur lagi koordinatnya :D

    • Unknown

      mau tanya, dimana saya bisa mempelajari tentang css:before dan css:after karena saya gatau fungsi :before sama :after sama sekali, sekalinya ngerti itu cuma hasil copas .. pas di coba bikin sendiri di CSSDeck malah acak2an .. saya ga tau keyword apa yang harus saya ketikkan, sekalinya coba2 malah ke masuk ke postingan kyk ribbon, breadcrumb, dll ..

    Komentar telah ditutup.