22.2.14
24
Text Box Image

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)

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Cara Mudah Memberi Efek Pada Text Box
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

24 komentar

  1. wau keren ini buat editing sidebar widget blog, bisa jadi custom design nih :-) ikutan praktik ah, trims ya

    BalasHapus
    Balasan
    1. boleh mas,semoga widget sidebarnya semakin keren,

      Hapus
  2. ini dia nih yang saya cari, keren bos......

    BalasHapus
  3. Makasih ya informasinya. Petunjuk yang jelas dan mudah di pahami.

    BalasHapus
  4. mbk Devy memang bener2 kreatif, pengen sih memakainya tapi gimana dengan script templat saya apa gak kepenuhan nih jika dikumpulin semua. hehe

    BalasHapus
    Balasan
    1. benar mas,hampir semua artikel saya memberikan kode untuk copy paste,oleh karena itu diatas sudah saya jelaskan bahwa kode diatas dapat kita pasang langsung pada postingan,jadi tidak perlu buka template.

      Hapus
  5. saya tetep nyimak aja ya mbak..
    udah lengkap juga sih efek di blog saya..hehe

    BalasHapus
  6. emang hebat dah mbak Devi ini, penjelesannya juga sangat detail jadi mudah dipahami. nanti kapan-kapan saya coba yang satu ini. Terimakasih mba sudah berbagi :D

    BalasHapus
  7. ijin follow
    ditunggu folbacknya

    BalasHapus
  8. rumit jg ya..cara pasangyna :d

    BalasHapus
  9. wah asyik juga ya kak kalau text box bisa di kasih efek getu :)

    BalasHapus
  10. wah jadi unyu2 efeknya ya sis kpn2 ane coba msih mau jln2 dlu di blognya :)

    BalasHapus
  11. Keren banget....kita dapat memfokuskan pembaca dengan efek text box ini ya

    BalasHapus
  12. Thanks mas tutorialnya :D

    BalasHapus
  13. caranya mudah banget ternyata
    kalau sudah tau mudah yaa mbak
    :D

    BalasHapus
  14. Boleh dicoba nih cara memberi efek pada text box nya, biar cantik blognya. Terimakasih ya

    BalasHapus
  15. Cara membuatnya cukup simple tapi tampilannya sangat keren :)
    Izin praktek ah...

    BalasHapus
  16. kunjungan pertama......nice artikel

    BalasHapus
  17. Jadi manis yah hasilnya, keren :)

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK