Efek Pita Tiga Dimensi dengan CSS

Pita Tiga Dimensi

Selamat siang,.. Mungkin beberapa dari Anda bahwa gambar diatas adalah murni dibuat dengan CSS3. Ya, itu adalah salah satu pemanfaatan CSS Triangle yang menurut saya paling sempurna:

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

<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 untuk berkreasi sendiri:

Ide kreatif: James Koster

Advertise

Contact Me

300x250

Advertise

Contact Me

300x250