Setelah saya membahas tentang
Fixed TextArea di postingan saya yang sebelumnya, kali ini saya akan memberikan tulisan tentang cara membuat TextArea seperti di
Twitter. Mungkin sudah ada banyak para sodara blogger yang bisa membuatnya, tapi bagi yang belum tahu silahkan simak postingan saya yang ini.
Textarea twitter ini memang sangat bagus menurut saya
karena ada efek glow pada bordernya. Langsung saja deh lihat yuk tutorialnya.
Pertama yang anda lakukan adalah masukkan kode CSS di bawah ini di
atas atau
sebelum kode
</head>.
textarea {
width:300px;
height:50px;
resize:none;
outline: none;
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid #DDDDDD;
}
textarea:focus {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
border: 1px solid rgba(81, 203, 238, 1);
}
Note :
- untuk kode width yang berwarna merah , isi sesuai lebar yang anda inginkan
- untuk kode height yang berwarna biru, isi sesuai tinggi yang anda inginkan
- untuk kode resize yang berwarna hijau, silahkan hapus kalau anda ingin Textarea anda bisa di resize.
- untuk kode border yang berwarna kuning, silahkan anda ubah sesuai selera.
Dan jangan lupa kode HTML nya yaitu :
<textarea>Ini TextArea mirip Twitter</textarea>
Beginilah jadinya :
Gimana ? Keren kaan. Thanks
.
