CSS网页登陆表单实例

核心提示： W3cplus从今天刚开推出藤藤练习的CSS3系列，出这个系列主要是为了让同样有着CSS3兴趣的同学更有动力，CSS网页登陆表单实例，在这个系列中都是由W3cplus美女成员藤藤每天根据国外搜集的有关psd设计图，然后将设计图通过css3的代码转换成DEMO案例，原本使用纯CSS3的渐变配合多背景制作，但受限于阴影，

 W3cplus从今天刚开推出藤藤练习的CSS3系列。出这个系列主要是为了让同样有着CSS3兴趣的同学更有动力，在这个系列中都是由W3cplus美女成员藤藤每天根据国外搜集的有关psd设计图，然后将设计图通过css3的代码转换成DEMO案例。一是为了自己提高，二是与其他有同样爱好的同学一起分享。如果你喜欢，那就持续关注w3cplus的有关更新。
这个案例主要制作的是一个登录表单，在这个案例中使用了box-shadow、gradient,transform和transition等属性，其中最难的地方是输入框被咬的那部分，原本使用纯CSS3的渐变配合多背景制作，但受限于阴影，最终改变使用base的64位图像处理。详细的参考代码吧：
HTML 结构：
<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="******"/>
</li>
</ul>
<a href="javascript:;" class="button"/><i class="icon-arrow-right"></i></a>
</form>
</div>
CSS代码：
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;