Memberi Efek Pita Pada Text Box

Memberi Efek Pita Pada Text Box - Sebelum melanjutkan artikel ini, saya mengucapkan HAPPY VALENTNE buat semua sahabat pecinta SAHABAT BLOGGER 77 yang turut merayakannya, semoga semakin sayang dan cinta dengan muatan konten yang ada pada blog ini, yang mau ucapin sayang dan cinta sama adminnya boleh melalui SMS/BB. Hehhe..!!
Kebetulan masih dalam suasana Valentine Day's, so pasti banyak dekorasi dengan hiasan pita, seperti yang anda lakukan mungkin buat kekasih tercinta, memberi COKLAT dengan balutan pita sebagai penghias agar efek romantisnya dapet, betul guys.!?

Dengan surprise kado yang diterima, semua dengan pita sebagai pemberi keindahan, sempat berpikir bagaimana jika seandainya pita-pita ini dapat juga dirasakan oleh semua sahabat?, tak terkecuali yang JOMBLO sekalipun, Karena dengan niat diatas, idenya saya tuangkan untuk mengambil pita sebagai tema pembahasan untuk Memberi Efek Pita Pada Text Box, sehingga yang ingin memberi kado boleh menyertakan kata-katanya dengan hiasan pita pada text box.

Tanpa mengubah desain awalnya, saya tetap menggunakan kode <text area>, hanya sedikit tambahan CSS yang saya gabungkan dengan XML Code agar efek pita pada text box-nya dapat tampil.

Berikut CSS yang saya gunakan

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

Kode berikut saya tambahkan untuk menentukan model pita efeknya

.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;
/* Content javaScript text='http://sahabatblogger77.blogspot.com' google-code-versi-ID='ribbon77' */
-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);}

Saatnya Penerapannya untuk menampilkan di blog

Perhatikan kode berikut. Kode textarea saya hilangkan dan saya ganti dengan kode berikut, kode ini untuk tempat kita menuliskan text pada box yang sudah diberi efek pita, anda cukup mengganti text yang saya beri warna Merah

<div class="rb-wrap">
<p class="ribbon">
<strong class="ribbon-content">Tuliskan Text Anda</strong>
</p>
</div>

Biasanya penempatan CSS Code kita letakkan pada HTML Template, tetapi kode berikut sudah saya susun sehingga anda tidak perlu membentangkan kode-kode HTML Template anda.

Cukup Copy kode ini, dan letakkan pada mode HTML saat anda menuliskan postingan baru

<style>
.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;
  /* Content javaScript text='http://sahabatblogger77.blogspot.com' google-code-versi-ID='ribbon77' */
  -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;
}</style>

<div class="rb-wrap">
<p class="ribbon">
<strong class="ribbon-content">Tulis text anda disini.....</strong>
</p>
</div>

Maka hasilnya akan seperti ini

HAPPY VALENTINE DAY'S