Script CSS nya :
<style>
/** login form by Jeanot Nahasan Nida **/
/** visit http://jeanotnahasan.blogspot.com **/
body{
font-family: sans-serif;
background: #999999;
color: #999999;
}
#contact div, h1, form, fieldset, input, textarea {
margin: 0; padding: 0; border: 0; outline: none;
}
#contact {
width: 400px; margin: auto; padding: 30px 30px; margin-top:60px;
background: #111111;
border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;
-moz-box-shadow: 0px 0px 5px #999;-webkit-box-shadow: 0px 0px 5px #999;
}
#contact a{
text-decoration:none;
color:#666666;
}
h1 {
font-size: 26px; color: #999999; text-transform: uppercase;
text-align: center; margin: 0 0 30px 0; text-shadow: 0px 3px 2px #000000;
}
form {
margin-bottom:25px;
}
label {
float: left; margin: 10px 20px 0 0; width: 75px;
text-align: right; font-size: 14px; color: #999999;
font-weight:bold;
text-transform: uppercase; text-shadow: 0px 2px 0px #111111;
}
input {
width: 250px; height: 35px; padding: 5px 20px 0px 20px; margin: 0 0 20px 0;
background: #666666;
background: -moz-linear-gradient(top, #999999 0%, #b2b2b2 20%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999999), color-stop(20%,#b2b2b2)); /* webkit */
border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
-moz-box-shadow: 0px 2px 0px #111111;-webkit-box-shadow: 0px 2px 0px #111111;
font-size: 14px; color: #444444; text-transform: uppercase; text-shadow: 0px -1px 0px #222222;
}
input::-webkit-input-placeholder {
color: #333333; text-shadow: 0px -1px 0px #222222;
}
input:-moz-placeholder {
color: #333333; text-shadow: 0px -1px 0px #222222;
}input:focus{
background: #999999;
border: 1px solid #CCCCCC;
background: -moz-linear-gradient(top, #999999 0%, #dddddd 20%); /* firefox */ /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999999), color-stop(100%,#dddddd)); /* webkit */
}
input[type=submit], input[type=reset] {
width: 100px; height: 30px; float: right; padding: 5px 5px; margin: 0 15px 0 0;
-moz-box-shadow: 0px 0px 5px #999;-webkit-box-shadow: 0px 0px 5px #999;
background: -moz-linear-gradient(top, #999999 0%, #b2b2b2 20%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999999), color-stop(100%,#b2b2b2)); /* webkit */
cursor: pointer;
}
input[type=submit]:hover, input[type=reset]:hover{
border: 3px solid #CCCCCC;
background: -moz-linear-gradient(top, #999999 0%, #dddddd 20%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999999), color-stop(100%,#dddddd)); /* webkit */
}
</style>
Script HTML5 nya :
<!DOCTYPE html>
<html
<head>
<title>Belajar HTML5 dan CSS3 | Jeanot Nahasan Nida</title>
</head>
<body>
<div id="contact">
<h1>Login Form by JNC</h1>
<form action="http://www.crazflo.web.id" method="post">
<fieldset>
<label for="name">Username:</label>
<input type="text" id="username" name="username" placeholder="Enter your username" />
<label for="password">Email:</label>
<input type="password" id="password" name="password" placeholder="your password" />
<input type="submit" value="Login" /> <input type="reset" value="Cancel" />
</fieldset>
</form>
<center><p style="font-size:12px;">© <a href = "http://jeanotnahasan.blogspot.com"> JNC </a> | 2012 <br/>
<a href="">back to post</a></p>
</center>
</div>
</body>
</html>Semoga bermanfaat, jika ada kekurangan, silakan disampaikan via komentar.
Postingan
0 komentar:
Posting Komentar