Dalam pembuatan website hal yang paling utama adalah interface atau tampilannya, karena website tanpa interface itu bagaikan sayur tanpa garam bo... Nah kali ini saia mau sharing bagaimana agar interface form kita lebih menarik, nih contohnya seperti ini
Ok deh bagi yang tertarik silahkan copy paste source code berikut ini
Buatlah file form.html
<html>
<head>
<title>L'ARC EN CELL</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<form action="proses.php" method="post" name="data" id="userForm"><p>
<table width="295" border="0" cellspacing="5" cellpadding="1" align="center" class="table">
<tr>
<td><label>Nama</label></td>
<td>:</td>
<td><input type="text" name="nama" class="input" title="Nama Harus Di isi"></td>
</tr>
<tr>
<td><label>Nomor</label></td>
<td>:</td>
<td><input type="text" name="nomor" class="input" title="Nomor harus diisi"></td>
</tr>
<tr>
<td></td>
<td></td>
<td><input class="button" type="submit" value="Simpan"></td>
</tr>
</table>
</body>
</html>
kemudian kita buat file css nya simpan dalam folder yang sama dengan file form.html tadi, kemudian file css simpan dengan nama file style.css
* {
margin: 0;
padding: 0;
}
* {
margin: 0;
padding: 0;
}
body {
background-color: #bfbfbf;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 20px;
color: #222;
width:100%;
}
.input{
font-family:"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",sans-serif;
font-weight:200;
font-size:18px;
padding:5px;
margin-top:2px;
margin-right:6px;
margin-bottom:16px;
border:1px solid #aaa;
background:#fbfbfb;
outline:none;
color: #bfbfbf;
-moz-border-radius:30px;
-khtml-border-radius:30px;
-webkit-border-radius:30px;
-moz-box-shadow:inset 1px 1px 2px rgba(200,200,200,0.2);
-webkit-box-shadow:inset 1px 1px 2px rgba(200,200,200,0.2);
box-shadow:inset 1px 1px 2px rgba(200,200,200,0.2);
}
input{color:#bfbfbf;}.clear{clear:both;}
.input:hover
{
background-image:-moz-linear-gradient(top,#72706d,red);
background-image:-webkit-gradient(linear,left top,left bottom,from(yellow),to(#254156));
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=yellow,endColorStr=#254156);
-ms-filter:"progid:DXImageTransform.Microsoft.Gradient(startColorStr=#8BA0B5, endColorStr=#254156)";
border: 2px solid yellow;
}
.button {
font-family:sans-serif;
padding:3px 10px;
border:none;
font-size:24px;
-moz-border-radius:30px;
-khtml-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;
cursor:pointer;
text-decoration:none;
margin-top:-3px;
color: red;
font-weight: bold;
background-image:-moz-linear-gradient(top,#72706d,black);
background-image:-webkit-gradient(linear,left top,left bottom,from(#8BA0B5),to(#254156));
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#8BA0B5,endColorStr=#254156);
-ms-filter:"progid:DXImageTransform.Microsoft.Gradient(startColorStr=#8BA0B5, endColorStr=#254156)";
}
.button:hover{
background-image:-moz-linear-gradient(top,#72706d,blue);
background-image:-webkit-gradient(linear,left top,left bottom,from(#8BA0B5),to(#254156));
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#8BA0B5,endColorStr=#254156);
-ms-filter:"progid:DXImageTransform.Microsoft.Gradient(startColorStr=#8BA0B5, endColorStr=#254156)";
}
Dalam pemanggilan dari html ke css ada dua cara yaitu id atau class untuk pemanggilan id(dalam css nya di awali dengan tanda #) sedangkan class(diawali dengan tanda .)
contohnya :
kita akan memodif form inputan
<tr>
<td><label>Nama</label></td>
<td>:</td>
<td><input type="text" name="nama" class="input" title="Nama Harus Di isi"></td>
</tr>
didalam input type terdapat class="input" nah disanalah fungsi pemanggilan html ke css,kalian lihat di css nya inputan diawali . atau #,jika pagar ganti class menjadi id. Dalam file style.css telah dimasukan untuk memodif tombol submit tinggal kalian masukan saja ke buttonnya dengan class button, Semoga bermanfaat.
0 komentar:
Posting Komentar