Cara Mudah Memberi Efek Pada Text Box

Cara Mudah Memberi Efek Pada Text Box - Text Area adalah salah satu cara termudah untuk memberi efek pada text sehingga tampilannya terlihat seperti box, kotak atau kubus. Penerapan kodenya juga cukup simple hanya dengan kode <textarea>ISI KONTEN</textarea> jadi dech sebuah box yang dapat kita tuliskan sebuah teks. Namun untuk menghasilkan yang lebih menarik dan elegan banyak cara yang bisa kita lakukan untuk sekedar memberi efek pada sebuah text box. Seperti minggu lalu tepatnya dihari kasih sayang saya turut menyapa pengunjung setia pecinta SAHABAT BLOGGER 77 dengan ucapan HAPPY VALENTINE DAY'S dengan balutan efek pita pada tex box-nya seperti ini:



TAMPILKAN



Nah kali ini saya akan memberikan beberapa kode yang dapat anda kembangkan dengan mudah untuk memberi efek pada text box sesuai kreatif anda masing-masing. Kita coba menggunakan kode default pembuka textarea dengan penggunaan kode seperti ini:

<style type="text/css">
.box-satu {
  background-color: #cecece;
  border-left: 5px solid green;
  padding: 10px; text-align: left;
  margin:0 0 0 10%;
}
</style>
<div class="box-satu">
....
ISI KONTEN
...
</div>

Maka hasilnya akan seperti ini:

SAHABAT BLOGGER 77 (http://sahabatblogger77.blogspot.com) berdiri sejak October 22, 2013 dengan Nice Blog Share tentang : Berbagi pengetahuan seputar Tutorial Blog, Blogging Tips, SEO informasi, CSS, HTML Coding Editing, Template Design, Informasi Umum dan Kehidupan Sosial yang di kelola oleh: Devy Indriyani

Tampilannya hampir sama dengan text area, kurang menarik dan terkesan biasa-biasa saja, Ok.!! sekarang mari kita timpah kodenya dengan penggunaan kode CSS berikut:

<style type="text/css">
.box-dua {
  background-color:green;
  border-left:5px solid red;
  border-right:5px solid red;
  -webkit-border-radius:35px;
  -moz-border-radius:35px;
  padding:10px;
  border-top:1px solid red;
  border-bottom:1px solid red;
  border-radius:35px;
}

.isi-content {
  -webkit-border-radius: 35px;
  -moz-border-radius: 35px;
  background-color: #cecece;
  border-bottom: 1px solid red;
  border-left: 6px solid red;
  border-radius: 35px;
  border-right: 6px solid red;
  border-top: 1px solid red;
  margin:0 5px 0 5px;
  padding: 10px;
  text-align: left;
}
</style>
<div class="box-dua">
   <div class="isi-content">
....
ISI KONTEN
...
   </div>
</div>

Hasilnya :

SAHABAT BLOGGER 77 (http://sahabatblogger77.blogspot.com) berdiri sejak October 22, 2013 dengan Nice Blog Share tentang : Berbagi pengetahuan seputar Tutorial Blog, Blogging Tips, SEO informasi, CSS, HTML Coding Editing, Template Design, Informasi Umum dan Kehidupan Sosial yang di kelola oleh: Devy Indriyani

Kode diatas hanyalah kode yang biasa kita gunakan, kita edit untuk mendapatkan tampilan yang sesuai keinginan. Tidak sulit dan terasa mudah bukan? pada dasarnya anda harus memahami kode padding, margin, dengan jeli kapan harus menggunakan satuan pixel, em, untuk mengatur layout tampilan, karena kode padding dan margin hampir memiliki fungsi yang sama.

Coba Anda Perhatikan kode berikut, Saya menggunakan CSS default dasar untuk pembentukan text box seperti efek diatas. Namun kodenya akan saya gabungkan untuk menampilkan 2 efek yang berbeda dengan atribut class='note' dan class='note-radius'. Mari kita coba pisahkan efek apa yang dapat dihasilkan oleh kedua kode CSS ini:

//effect-1 style
.note {
  position:relative;
  width:30%;padding:1em 1.5em;
  margin:2em auto;
  color:white;
  background:#97C02F;
  overflow:hidden;}

.note:before {
  content:"";
  position:absolute;
  border-width:0 16px 16px 0;
  border-style:solid;
  border-color:white white #658E15 #658E15;
  background-color:#658E15;
  -webkit-box-shadow:0 1px 1px rgba(0,0,0,.3),-1px 1px 1px rgba(0,0,0,.2);
  -moz-box-shadow:0 1px 1px rgba(0,0,0,.3),-1px 1px 1px rgba(0,0,0,.2);
  box-shadow:0 1px 1px rgba(0,0,0,.3),-1px 1px 1px rgba(0,0,0,.2);
  display:block;width:0;}

//effect-2 style
.note-radius {
  -webkit-border-radius:5px 0 5px 5px;
  -moz-border-radius:5px 0 5px 5px;
  border-radius:5px 0 5px 5px;}

.note-radius:before {
  border-width:8px;
  border-color:white white transparent transparent;
  -webkit-border-radius:0 0 0 5px;
  -moz-border-radius:0 0 0 5px;
  border-radius:0 0 0 5px;}

Sampai pada tahapan ini Anda sudah memiliki 2 kode dengan efek yang berbeda, selanjutnya membentuk rangka kode untuk membungkus isi konten Anda dengan perintah HTML seperti ini:

<div class="note">
...
ISI KONTEN
...
</div>


<div class="note-radius">
...
ISI KONTEN
...
</div>

Maka kedua kode CSS diatas akan menghasilkan 2 efek pada text box seperti ini:

SAHABAT BLOGGER 77

SAHABAT BLOGGER 77

Bagaimana, mudah bukan.? demikian yang dapat saya sampaikan, semoga tutorial diatas dapat membantu anda memberi efek pada text box dengan mudah. SELAMAT BERKREASI
(February 23, 2014 By. Devy Indriyani)