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>
0 comments:
Post a Comment