I tried to make a good looking Sign In form. Hope this helps you. Here we go:
New stylish sign in form using CSS3 and HTL5.

New sign in form
The html:
<div style="margin-leftauto;margin-right:auto;">
<div class="bubble">
<h2>Sign in</h2>
<div class="loginFormafter"></div>
<form class="loginForm" name="loginForm">
<fieldset>
<label>Username</label>
<input type="text" name="username" required="required" placeholder="Enter your user name" style="margin-left: 20px;" />
<label>Password</label>
<input type="password" name="password" required="required" placeholder="Enter your password" style="margin-left: 20px;"/>
<input type="submit" value="Sign In" style="width: 100px;" />
</fieldset>
</form><br/>
</div>
</div>
And the css:
body,div,h1,form,fieldset,input,textarea {
border: 0;
}
body {
background: #afafaf;
font-family: sans-serif;
}
label {
float: left;
margin: 11px 10px 0px 0px;
width: 95px;
text-align: right;
font-size: 16px;
color: #1f6474;
font-weight:bold;
font-family: 'Segoe UI Light', 'Segoe UI', Arial, Helvetica, sans-serif;;
}
input[type=text],input[type=password]{
width: 250px;
height: 25px;
padding: 5px 10px 5px 10px;
margin: 0 0 5px 0;
background: #fff;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
font-family: sans-serif;
font-size: 12px;
color: #000;
border: 1px solid #82ccdd;
}
.placeholder {
color: #123a44;
font-size:12px;
}
input[type=text]::-webkit-input-placeholder,input[type=password]::-webkit-input-placeholder{
color: #123a44;
font-size:12px;
}
input[type=text]:-moz-placeholder,input[type=password]:-moz-placeholder {
color: #123a44;
font-size:12px;
}
input[type=text]:focus,input[type=password]:focus {
border: solid #1f6474 1px;
}
input[type=submit]{
height: 35px;
float: right;
display: inline-block;
outline: none;
cursor: pointer;
text-transform: capitalize;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
margin-right: 10px;
margin-top:10px;
color: #333;
border: 1px solid #777;
background: #ddd;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
background: -moz-linear-gradient(top, #fff, #ddd);
background-image: -webkit-linear-gradient(top, #fff, #ddd);
background-image: -ms-linear-gradient(top, #fff, #ddd);
background-image: -o-linear-gradient(top, #fff, #ddd);
background-image: linear-gradient(top, #fff, #ddd);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#dddddd');
}
input[type=submit]:HOVER{
background-color: #ddd;
background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
background-image: -webkit-linear-gradient(top, #eee, #ccc);
background-image: -moz-linear-gradient(top, #eee, #ccc);
background-image: -ms-linear-gradient(top, #eee, #ccc);
background-image: -o-linear-gradient(top, #eee, #ccc);
background-image: linear-gradient(top, #eee, #ccc);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#cccccc');
text-decoration: none;
}
.bubble {
background: #fff;
clear: both;
margin: 0px auto;
width: 350px;
position: relative;
/*rounded corners and box shadows*/
-moz-border-radius: 5px;
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-khtml-border-radius: 5px;
-khtml-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 5px;
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
border-radius: 5px;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
overflow: visible;
}
.loginForm{
margin-bottom:10px;
background-color: #eaeaea;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#cccccc');
width: 300px;
position: relative;
z-index: 2;
-moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.55);
-khtml-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.55);
-webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.55);
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.55);
height:200px;
left: -16px;
}
.loginFormafter {
position: relative;
height: 0;
width: 0;
left: -16px;
top: 0px;
border-width: 5px 8px;
border-style: solid;
border-color: transparent #555 #555 transparent;
z-index: 1;
}
.bubble h2 {
font-size: 30px;
color: #123a44;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
border-bottom:solid 2px #82ccdd;
width:90%;
margin-left:auto;
margin-right:auto;
font-family: 'Segoe UI Light', 'Segoe UI', Arial, Helvetica, sans-serif;;
padding-bottom: 5px;
font-weight:lighter;
}
Like this:
Like Loading...