3 Colection Ribbon Style Boxes Info

3 Colection Ribbon Style Boxes Info - Banyak cara untuk membuat dan menampilkan text info dengan berbagai style, salah satunya adalah dengan memberikan hiasan border pada sisi text sehingga berbentuk box. Seperti Membuat Panel Slide Untuk Menyimpan Text merupakan salah satu tampilan SPOILER BOX yang sudah saya modifikasi dengan efek ribbon pita.

Efek kali ini saya akan memberikan 3 Colection Ribbon Style Boxes Info yang bisa Anda gunakan untuk memberikan hiasan gaya cantik dan keren untuk tampilan info teks Anda, tampilan gambarnya seperti ini:

BACA JUGA

Penyebab Menurunnya Kualitas SEO Pada Blog

Elemen CSS dibawah ini saya jabarkan dalam 1 wilayah deklarasi, Anda tinggal pilih salah satu diantara ke-3 Colection Ribbon Style Boxes Info untuk menghias teks Anda, masing-masing box sudah saya tandai dengan teks berwarna MERAH seperti ini:

<style type="text/css">
.boxes1-info,.boxes3-info {padding:63px 5px;text-align:left;color:#999}
.boxes {
  background: #fff;box-shadow: 0 0 3px rgba(0,0,0,0.25);
  float: left;height: 220px;margin: -20px 42px 0 0;
  position: relative;text-align: center;width: 210px}

.boxes p {
  background: #08b;
  background-image: radial-gradient(transparent 30%, rgba(0, 0, 0, 0.2));
  background-image: -webkit-radial-gradient(transparent 30%, rgba(0, 0, 0, 0.2));
  background-image: -moz-radial-gradient(transparent 30%, rgba(0, 0, 0, 0.2));
  background-image: -ms-radial-gradient(transparent 30%, rgba(0, 0, 0, 0.2));
  background-image: -o-radial-gradient(transparent 30%, rgba(0, 0, 0, 0.2));
  color: #fff;font-size: 18px;font-weight: bold;
  position: relative;text-shadow: -1px -1px 1px rgba(0,0,0,0.2)}

/* Ribbon Style 1 (Folded) */
.ribbon1:before, .ribbon1:after {
  bottom: 30px;box-shadow: 0 30px 10px rgba(0,0,0,0.8);
  content: "";height: 50px;position: absolute;width: 47.5%;z-index: -1}

.ribbon1:before {left: 3%;transform: rotate(-5deg)}
.ribbon1:after {right: 3%;transform: rotate(5deg)}
.ribbon1 p {
  border-width: 1px 1px 2px;box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  padding: 4px 40px;position: absolute;right: -14px;top: 12px}

.ribbon1 p:after {
  border-width: 7px;border-style: solid;
  border-color: #134 transparent transparent #134;bottom: -15px;
  content: "";position: absolute;right: -1px}

/* Ribbon Style 2 (Cutter) */
.ribbon2 {z-index: -1}
.boxes2-info {padding:5px 5px;text-align:left;color:#999}
.ribbon2 p {
  border-color: rgba(0,0,0,0.1);box-shadow: 0 0 4px rgba(0,0,0,0.3);
  display: inline-block;margin: 12px auto;padding: 4px 30px;width:150px}

.ribbon2 p:before, .ribbon2 p:after {
  bottom: 24px;box-shadow: 0 28px 8px rgba(0,0,0,0.3);content: "";
  height: 25px;position: absolute;width: 47%;z-index: -1}

.ribbon2 p:before {left: 1%;transform: rotate(-6deg)}
.ribbon2 p:after {right: 1%;transform: rotate(6deg)}

/* Ribbon Style 3 (Corner) */
.ribbon3 {overflow: hidden}
.ribbon3 p {
  background-image: linear-gradient(0deg, transparent 50%, rgba(0, 0, 0, 0.3));
  background-image: -webkit-linear-gradient(0deg, transparent 50%, rgba(0, 0, 0, 0.3));
  background-image: -moz-linear-gradient(0deg, transparent 50%, rgba(0, 0, 0, 0.3));
  background-image: -ms-linear-gradient(0deg, transparent 50%, rgba(0, 0, 0, 0.3));
  background-image: -o-linear-gradient(0deg, transparent 50%, rgba(0, 0, 0, 0.3));
  border-width:1px 0;border-color:rgba(0,0,0,0.3);box-shadow:0 2px 6px rgba(0,0,0,0.5);
  padding: 4px 28px;position: absolute;width:180px;left:-13px}

.ribbon3 p:after {
  border-width: 7px;border-style: solid;
  border-color: #134 transparent transparent #134;bottom: -15px;
  content: "";position: absolute;right: -1px}

.ribbon3 p:before {
  border-width: 7px;border-style: solid;
  border-color: #134 #134 transparent transparent;bottom: -15px;
  content: "";position: absolute;left: -1px}
</style>

Hasilnya:




DEMO SHOW



Tahap selanjutnya tinggal menempatkan kode HTML berikut pada postingan Anda mode tulis HTML (bukan yang Compose), lengkapnya seperti ini:

<div class="boxes ribbon1"> <!..Ribbon Style 1 (Folded)..>
   <p>Info</p>
      <div class="boxes1-info">
          ...Insert Your Info In Here...
      </div>
</div>

<div class="boxes ribbon2"> <!..Ribbon Style 2 (Cutter)..>
   <p>Info</p>
      <div class="boxes2-info">
          ...Insert Your Info In Here...
      </div>
</div>

<div class="boxes">
  <div class="ribbon3"> <!..Ribbon Style 3 (Corner)..>
    <p>Info</p>
       <div class="boxes3-info">
          ...Insert Your Info In Here...
       </div>
  </div>
</div>