Untuk sementara ini, menambahkan css3 transition pada textarea akan beerfungsi secara optimal hanya ketika dibuka melalui Mozilla Firefox, Google Chrome dan Safari. Efek transisi pada "resize" sungguh memberi sentuhan luarbiasa sekalipun sayangnya belum dapat dinikmati di Opera dan IE. Jika anda menggunakan Opera atau IE sekalipun "efek resize" tak mungkin terlihat, namun demikian tentu saja masih ada efek lain yang dapat dinikmati seperti pada transisi background dan warna teks. Menggunakan Mozilla, Google Chrome dan Safari tentu saja lebih disarankan agar semua efek baru textarea dapat dinikmati (install dengan yang terbaru!). Selain menggunakan kode css3 (transition property), beberapa kode css (css property) juga ditambahkan agar css3 transition berfungsi seperti yang diharapkan.
CSS3 Transition Property
CSS3 transition property yang ditambahkan pada textarea seperti berikut:
transition:0.2s ease;
-o-transition:0.2s ease;
-ms-transition:0.2s ease;
-moz-transition:0.2s ease;
-webkit-transition:0.2s ease;
Kode CSS & xHTML textarea (1)
<style type="text/css">
.transarea{
min-height:70px;
max-height:300px;
min-width:150px;
max-width:96%;
padding:10px 5px 5px 12px;
display:block;
margin:20px 0;
transition:0.2s ease;
-o-transition:0.2s ease;
-ms-transition:0.2s ease;
-moz-transition:0.2s ease;
-webkit-transition:0.2s ease;
}
.transarea:focus{
color:#900;
}
</style>
<textarea class="transarea" rows="8" cols="30">
Text here!
</textarea>Kode CSS & xHTML textarea (2)
<style type="text/css">
.div-area{
display:inline-block;
padding:8px;
border:2px solid #eee;
border-radius:10px;
background:red url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidkblzuBeVIi8-l_v-LzxZBM-HyifXIiZwpYG0Hxg7n2KoUJbzuOULI73bsglHjVPmQw5lDDr1Yr40Mt_MiAaP3JyCSE36KO5rsEAhueWkonXRmlgYWXWY696biqDnOVkFD74lVPRV6EM/s400/gambar-harimau-03-400x284.jpg) center no-repeat;
background-size:100% 100%;
margin:20px 0;
box-shadow:0 0 10px #000;
}
.text-area{
margin:0;
padding:10px 5px 5px 12px;
background:rgba(0,0,0,0.2) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyNjXGkkmOMLEVs2NCx56r7wEAHkx5mr_wtMVEG7vQbSGbYjAVdrRB2LAjGMchYUieOvioNnW7r702KcsPh1pkfVxHGXUCohyphenhyphenlJ_r9LoUVJwYW49yWnJAzIuLf4Gu4e_hBeNa5kbF0kqt8/s128/th-ori-textarea-resize18.png) bottom right no-repeat;
font:normal 12px Verdana;
line-height:18px;
color:#eee;
border-radius:5px;
box-shadow:0 0 12px #eee;
transition:0.3s ease;
-o-transition:0.3s ease;
-ms-transition:0.3s ease;
-moz-transition:0.3s ease;
-webkit-transition:0.3s ease;
}
.text-area:focus{
background-color:#222;
background-color:rgba(0,0,0,0.6);
border-radius:8px;
box-shadow:-1px -1px 1px #fff, 2px 2px 6px #fff;
}
</style>
<textarea class="text-area" rows="10" cols="40" readonly>
Text here!
</textarea>Kode yang disertakan di atas akan menghasilkan textarea seperti yang terlihat dalam demo di bawah ini. Lakukan perubahan kode css atau xHTML untuk mendapatkan hasil yang berbeda dan lebih baik.
Please click the button to display. Continue with editing code and click to see the results!
Tidak ada komentar:
Posting Komentar