12 April 2013

Bagaimana cara mengubah text area standar menggunakan CSS?



Textarea adalah tag HTML yang biasanya digunakan dalam formulir, redaksi, kotak komentar atau apapun yang melibatkan tentang penulisan sesuatu di web atau blog. Baru-baru ini salah satu pembaca meminta kepada penulis bagaimana untuk mengubah tampilan textarea dari tampilan default (standar). Memodifikasi textarea dengan CSS cukup mudah dan tidak memerlukan banyak pengetahuan yang luas tentang CSS. 

Ini adalah tutorial cepat, simple dan Anda bisa bermain-main dengan CSS yang telah disediakan untuk membuat sesuatu yang berbeda. Anda tidak mau hanya duduk diam saja sambil mencari tahu  kode yang di maksud, Anda tinggal menyalin dan menempelkan kode CSS dalam stylesheet . Silahkan lihat live demonya (demo langsung)...




Kode HTML : 

Kode HTML yang digunakan dalam postingan: 

<textarea class="tbi-textarea">masukan text disini...</textarea>

 
Kode CSS : 

Pastekan kode berikut dibawah ini ke dalam stylesheet CSS anda kemudian simpan.
Ikuti Langkah-langkahnya sbb:
1. Masuk ke akun blogger anda -> klik Template -> Edit HTML 
2. Cari kode ]]> </ b: skin> (Tip: - Gunakan Ctrl + F untuk mencari)
3. Pastekan kode berikut tepat  diatas kode  ]]> </ b: skin> 

/* Custom Textarea by jalu-pangna.blogspot.com */
.tbi-textarea {
    background: #F2F2F2;
    border: 1px solid #ccc;
    font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
    font-size: 13px;
    line-height: 18px;
    min-width: 300px;
    width: 60%;
    height: 100px;
    padding: 10px;
    margin: 0;
    outline: none;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 1px 1px 2px 2px #ccc;
    box-shadow: 1px 1px 2px 2px #ccc;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}

.tbi-textarea:hover {
    background: #fff;
    width: 70%;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}
/* Custom Textarea by jalu-pangna.blogspot.com */

Simpan template dan lihat hasilnya...
Semoga bermanfa'at. 

Original Source 

2 komentar: