Membuat textarea dengan sebuah background image dapat dilakukan dengan 2 macam cara berdasarkan 2 pertimbangan. Kedua cara mengahruskan kita untuk menggunakan tag style dengan beberapa kode css (css property). Cara pertama dilakukan dengan menambahkan background image secara langsung pada elemen textarea. Cara ini cukup simple karena hanya perlu menambahkan "attribute class" pada tag textarea. Sayangnya, cara seperti ini membuat "icon resize" yang biasanya terlihat diujung kanan bawah box dan menjadi ciri khas textarea ketika dibuka di Mozzila, Goggle Chrome dan Safari menjadi hilang (tak terlihat). Cara yang kedua adalah dengan cara menambahkan tag div untuk membungkus tag textarea. Tag div inilah yang nantinya diberi background image sebagai latar belakang, sementara pada textarea ditambahkan background rgba dan icon resize agar textarea tetap terlihat sebagaimana mestinya.
Membuat background image pada textarea dg kode css sederhana
<style type="text/css">
.simple-area{
background:url(https://lh3.googleusercontent.com/-jCl4CxopWIk/UDAaDFaqERI/AAAAAAAAANI/3p1qh2Mru10/s400/gambar-harimau-03-400x284.jpg) center center no-repeat;
background-size:100% 100%;
color:#fff;
}
.simple-area:focus{
background:#333;
}
</style>
<textarea class="simple-area" rows="10" cols="40">
Content here!
</textarea>Membuat background image pada textarea dg kode css lebih komplek
<style type="text/css">
.text_area{
display:block;
position:relative;
padding:10px 5px 5px 12px;
background:url(https://lh3.googleusercontent.com/-jCl4CxopWIk/UDAaDFaqERI/AAAAAAAAANI/3p1qh2Mru10/s400/gambar-harimau-03-400x284.jpg) center center no-repeat;
background-size:100% 100%;
border:2px solid #eee;
border-radius:8px;
box-shadow:0 0 12px #000;
color:#eee;
font:normal 12px Verdana;
line-height:18px;
}
.text_area:focus {
background:#222;
}
</style>
<textarea class=".text_area" rows="10" cols="40">
Content here!
</textarea>Menambah tag DIV untuk membuat textarea dengan background image
<style type="text/css">
.div_area {
display:inline-block;
padding:8px;
border:2px solid #eee;
border-radius:10px;
background:red url(https://lh3.googleusercontent.com/-jCl4CxopWIk/UDAaDFaqERI/AAAAAAAAANI/3p1qh2Mru10/s400/gambar-harimau-03-400x284.jpg) center 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-color:#444;
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:background-color 0.75s ease;
-o-transition:background-color 0.75s ease;
-ms-transition:background-color 0.75s ease;
-moz-transition:background-color 0.75s ease;
-webkit-transition:background-color 0.75s ease;
}
.text-area:focus {
background-color:#222;
background-color:rgba(0,0,0,0.6);
}
</style>
<div class="div-area">
<textarea class=".text-area" rows="10" cols="40">
Content here!
</textarea>Di bawah ini telah disertakan 3 buah textarea dengan background image yang dibuat dengan 3 cara berbeda. Edit kode css untuk mendapatkan dan hasil berbeda.
Please click the button to display. Continue with editing code and click to see the results!
Tidak ada komentar:
Posting Komentar