CSS Web Design examples: web Login form Instance

Article Introduction: Web page Login form instance.

W3cplus has just launched the CSS3 series from today's rattan practice. Out of this series is mainly to let the same have CSS3 interest students more motivation, in this series are by W3cplus Beauty member Toto every day according to foreign collection of the PSD design map, and then the design map through the CSS3 code into demo case. One is for their own improvement, and the other is to share with other students who have the same hobby. If you like, keep an eye on W3cplus updates.

This case is mainly made of a login form, in this case, the use of Box-shadow, Gradient,transform and Transition properties, the most difficult place is the input box was bitten that part of the original use of pure CSS3 gradient with multiple background production, But limited by shadows, the final change uses base's 64-bit image processing. A detailed reference code:

HTML structure:

<div class= "box" >
<form action= "#" method= "Get" >
<ul>
<li>
<label for= "username" >email:</label><input type= "text" id= "username" class= "username" placeholder= " John.smith@strategysoft.com "/>
</li>
<li>
<label for= "password" >password:</label><input type= "password" id= "password" class= "password" Placeholder= "Hu Jintao"/>
</li>
</ul>
<a href= "javascript:;" class= "button"/><i class= "Icon-arrow-right" ></i></a>
</form>
</div>

CSS code:

body,ul{
margin:0;
padding:0
}
A
Color:rgb (1, 124, 185);
Text-decoration:none;
}
Input:focus {
Outline:none 0;
}
body{
Color: #b5b5b5;
Font:14px "Arial";
}
Body
Li:first-child:after,
li:last-child:after{
Background-image:url (Data:image/png;base64,...); **/
}
. box{
position:relative;
width:384px;
height:140px;
margin:50px Auto;
}
. Box li{
List-style-type:none;
margin-bottom:10px;
border-radius:5px;
Overflow:hidden;
position:relative;
height:42px;
}
. Box Li Input{
Box-shadow:inset 0 0 5px Rgba (0,0,0,.5), -1px 1px 0 rgba (255,255,255,.05);
border:0 none;
padding:8px 5px 5px;
border-radius:5px;
width:300px;
height:28px;
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
-o-box-sizing:content-box;
-ms-box-sizing:content-box;
Box-sizing:content-box;
Background:rgba (0,0,0,.1);
Color: #fff;
}

. Box Li:first-child:after,
. Box li:last-child:after{
Position:absolute;
width:50px;
height:50px;
Content: "";
border-radius:25px;
Z-index:2;
Right: -23px;
box-shadow:0 0 8px Rgba (0,0,0,.5);
}
::-webkit-input-placeholder {
Color: #fff;
Font-weight:bold;
}
. Box li:first-child:after{
top:15px;
}
. Box li:last-child:after{
bottom:15px;
}
. Box label{
width:70px;
Display:inline-block;
Text-align:right;
}
. Box span{
Display:block;
Color: #6296b4;
padding-left:75px;
}
. button{
Position:absolute;
top:24px;
Right: -30px;
width:44px;
height:44px;
border-radius:22px;
border:1px solid #00a1d2;
Background:-webkit-linear-gradient (top, #029ecd, #0d7796);
Color: #fff;
text-shadow:1px 1px 0 #666;
box-shadow:0 0 0 5px #2c2c2c;
Z-index:3;
Text-align:center;
line-height:46px;
-webkit-transition:all 0.28s ease-in;
-moz--transition:all 0.28s ease-in;
}
. button:hover{
-webkit-transform:rotate (90DEG);
}
@font-face {
font-family: "Fontawesome";
Src:url ("Font/fontawesome-webfont.eot");
Src:url ("Font/fontawesome-webfont.eot? #iefix") Format ("Embedded-opentype"),
URL ("Font/fontawesome-webfont.woff") format ("Woff"),
URL ("Font/fontawesome-webfont.ttf") format ("TrueType"),
URL ("font/fontawesome-webfont.svg#fontawesome") format ("SVG");
Font-weight:normal;
Font-style:normal;
}
. icon-arrow-right:before {
Font-family:fontawesome;
Font-weight:normal;
font-size:26px;
Font-style:normal;
Display:inline-block;
Text-decoration:inherit;
Content: "\f061";
}