Bukan hanya
navbar ataupun tombol yang dapat dimodifikasi dengan menggunakan kode CSS,
textfield dan textarea atau yang biasa kita kenal dengan tempat untuk
menuliskan teks pada formulir ataupun form login. Jika kita menggunakan kode
textfield dan textarea secara default maka tampilannya pun akan biasa saja
tetapi jika kita menggunakan CSS kita akan mendapatkan hasil yang lebih menarik
dan maksimal. Ikuti tutorial berikut ini :
1.
Buka notepad atau dreamweaver
2.
Ketikkan kode dasar HTML seperti biasa
<html>
<head>
<title>Form
Unik</title>
</head>
<body>
</body>
</html>
3.
Masukkan kode berikut :
<input name="textfield" type="text" class="textfield" size="32" />
<textarea name="textarea"
class="textarea" cols="60"
rows="15"></textarea>
Letakkan kode diatas setelah kode <body>, sehingga
menghasilkan kode seperti berikut :
<html>
<head>
<title>Form
Unik</title>
</head>
<body>
<input name="textfield"
type="text" class="textfield" size="32" />
<textarea name="textarea"
class="textarea" cols="60"
rows="15"></textarea>
</body>
</html>
4.
Setelah itu masukkan kode CSS nya, seperti
dibawah :
<style>
.textfield {
background-color:#FF9;
border-radius:
20px;
color:#000;
}
.textfield:hover {
background-color:#FF9;
border-radius:
20px;
color:#000;
box-shadow:2px
2px 10px #000;
}
.textarea {
background-color:#FF9;
border-radius:
20px;
color:#000;
}
.textarea:hover {
background-color:#FF9;
border-radius:
20px;
color:#000;
box-shadow:2px
2px 10px #000;
}
</style>
Letakkan kode diatas sebelum kode </head>
<html>
<head>
<title>Form
Unik</title>
<style>
.textfield {
background-color:#FF9;
border-radius:
20px;
color:#000;
}
.textfield:hover {
background-color:#FF9;
border-radius:
20px;
color:#000;
box-shadow:2px
2px 10px #000;
}
.textarea {
background-color:#FF9;
border-radius:
20px;
color:#000;
}
.textarea:hover {
background-color:#FF9;
border-radius:
20px;
color:#000;
box-shadow:2px
2px 10px #000;
}
</style>
</head>
<body>
<input name="textfield"
type="text" class="textfield" size="32" />
<textarea name="textarea"
class="textarea" cols="60"
rows="15"></textarea>
</body>
</html>
wah, mantap gan infonya..
ReplyDeletethx ya sob udh di share..
Follow back+follow google+ nya saya tunggu ya sob..
lavixtastar.blogspot.com
Ok gan saya follow back
Delete