How to layout a login form using css

The content of this article is about how to use css to layout a login form. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Css layout to create a login form

This case mainly produces a login form. In this case, box is used -Attributes such as shadow, gradient, transform and transition. The most difficult part is the bitten part of the input box. It was originally made using pure CSS3 gradients with multiple backgrounds, but was limited by shadows. Finally, it was changed to use a base 64-bit image. deal with. 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="******"/>
</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 &#39;Arial&#39;;
}
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: &#39;FontAwesome&#39;;
src: url（&#39;font/fontawesome-webfont.eot&#39;）；
src: url（&#39;font/fontawesome-webfont.eot?#iefix&#39;） format（&#39;embedded-opentype&#39;），
url（&#39;font/fontawesome-webfont.woff&#39;） format（&#39;woff&#39;），
url（&#39;font/fontawesome-webfont.ttf&#39;） format（&#39;truetype&#39;），
url（&#39;font/fontawesome-webfont.svg#FontAwesome&#39;） format（&#39;svg&#39;）；
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";
}

The above is a complete introduction to how to use css to layout a login form, if you want to know more about CSS tutorial, please pay attention to the PHP Chinese website.

The above is the detailed content of How to layout a login form using css. For more information, please follow other related articles on the PHP Chinese website!