CSS3 code example: CSS3 make Web landing form

Article Introduction: This form effect is very common, but its production method is very innovative, which used the old technology is @font-face make icon, Box-shadow make shadow, the most bright spot is the use of Calc () function to calculate the value of positioning.

This form effect is very common, but its production method is very innovative, which used the old technology is @font-face make icon, Box-shadow make shadow, the most bright spot is the use of calc () function to calculate the value of positioning. This is a new way to play, although the previous introduction of the use of this property, later in the production is rarely used, this case let me once again appreciate the function of Calc (). If you like it, you can try it and get plenty of it.

HTML structure

Forms have an endless structure, but I prefer the structure of the form in Bootstrap, which, of course, is not used in this example, but is clear and simple:

<form action= "" method= "Post" class= "Login-form" >
<div class= "username" >
<input type= "text" name= "username" placeholder= "emma.watson@gmail.com" autocomplete= "on"/>
<span class= "User-icon icon" >u</span>
</div>
<div class= "Password" >
<input type= "password" name= "password" placeholder= "*******"/>
<span class= "Password-icon icon" >p</span>
</div>
<div class= "Account-control" >
<input type= "checkbox" Name= "Remember Me" id= "Remember Me" value= "Remember Me" checked= "checked"/>
<label for= "Remember Me" data-on= "C" class= "Check" ></label>
<label for= "Remember Me" class= "info" >remember me</label>
<button type= "Submit" >Login</button>
</div>
<p class= "not-registered" >not a registered user yet?<a>sign up now!</a></p>
</form>

	

CSS Code

The commonly used style code is not separately introduced, the specific can refer to the annotation in the style code:

/* Basic Style * *
Body {
Background:url (bg.jpg) no-repeat Center fixed;
background-size:100% 100%;/* make the background map full screen, often used to make full screen background * *
}
. Content {
width:600px;
height:420px;
margin:50px Auto;
}
/* Login Form form Style * *
. login-form {
width:400px;
height:177px;
margin:70px Auto 0;
padding-top:73px;
position:relative;/* for the user avatar positioning to make a reference point * *
Background-image:-*-linear-gradient (Top,rgb (255,255,255), RGB (242,242,242));/* Gradient effect making * *
box-shadow:0 3px 3px Rgba (21,62,78,0.8); * Shadow effect implementation * *
}
* * Use pseudo class to make the user avatar effect * *
. login-form:before {
Content: "";
Position:absolute;
top:-50px;
left:150px;
width:102px;
height:102px;
padding:2px;
border:1px solid RGB (216,216,219);
Background: #fff URL ("profilepicture.jpg") no-repeat 2px 2px;/* Load User avatar * *
}
/* Registration INFORMATION * *
. not-registered {
Position:absolute;
Color:rgb (153,153,153);
Font-weight:bold;
Top:calc (100% + 20px);//* equivalent to BOTTOM:-66PX (div.not-registered its own height 46px plus down-moving 20px) * * *
Background-color:rgb (255,255,255);
width:400px;
height:46px;
margin:0 Auto;
line-height:46px;
Text-align:center;
box-shadow:0 3px 3px Rgba (21,62,78,0.8);
}
. not-registered a {
margin-left:5px;
Text-decoration:none;
Color:rgb (52,119,182);
Cursor:pointer;
}
/* Form internal element style settings * *
. login-form Div {
width:216px;
height:28px;
margin:20px Auto;
position:relative;
line-height:28px;
Border:none;
}
* * User and password icon production * *
. Login-form. User-icon,
. login-form. Password-icon {
Display:inline-block;
font-family: ' Loginform-icon ';
font-size:15px;
Text-align:center;
line-height:28px;
Color:rgb (153,153,153);
Position:absolute;
left:1px;
top:1px;
Background-color:rgb (255,255,255);
Border:none;
border-right:1px solid RGB (229,229,232);
width:30px;
height:28px;
Transition:all 300ms linear;
}
/* Form Input style * *
. login-form. Username input,. login-form. Password Input {
height:100%;
Width:calc (100%-40px);/* Calculates the width of the form using calc (where 40px is the space for the icon) * *
padding-left:40px;
border-radius:2px;
BORDER:1PX solid;
Border-color:rgb (229,229,232) RGB (220,220,221) RGB (213,213,213) RGB (220,220,221);
Display:block;
Transition:all 300ms linear;
}
* * Use pseudo class to make the triangle effect * *
. login-form. Icon:before. Login-form. icon:after {
Content: "";
Position:absolute;
top:10px;
left:30px;
width:0;
height:0;
border:4px solid Transparent;
Border-left-color:rgb (255,255,255);
}
. login-form. Icon:before {
top:9px;
border:5px solid Transparent;
Border-left-color:rgb (229,229,232);
}
/* The effect of the form focus state * *
. login-form. Username input:focus, login-form. Password Input:focus {
Border-color:rgb (69,153,228);
box-shadow:0 0 2px 1px rgb (200,223,244);
}
Login-form. Username Input:focus + span,. login-form. Password Input:focus + span {
Background:-*-linear-gradient (Top,rgb (255,255,255), RGB (245,245,245));
Color:rgb (51,51,51);
}
. login-form. Username Input:focus + span:after, login-form. Password Input:focus + span:after {
Border-left-color:rgb (250,250,250);
}

. Login-form. Account-control Label {
margin-left:24px;
font-size:12px;
Font-family:arial, Helvetica, Sans-serif;
Cursor:pointer;
}
/* Button Effect * *
. Login-form button[type= "Submit"] {
Color: #fff;
Font-weight:bold;
Float:right;
width:68px;
height:30px;
position:relative;
Background:-*-linear-gradient (Top,rgb (74,162,241), RGB (52,119,182)) 1px 0 no-repeat,
-*-linear-gradient (Top,rgb (52,118,181), RGB (36,90,141)) left top no-repeat;
background-size:66px 28px,68px 29px;
Border:none;
border-top:1px solid RGB (52,118,181);
border-radius:2px;
Box-shadow:inset 0 1px 0 rgb (86,174,251);
text-shadow:0 1px 1px rgb (51,113,173);
Transition:all 200ms linear;
}
. Login-form button[type= "Submit"]:hover {
text-shadow:0 0 2px RGB (255,255,255);
Box-shadow:inset 0 1px 0 rgb (86,174,251), 0 0 10px 3px rgba (74,162,241,0.5);
}
. Login-form button[type= "Submit"]:active {
Background:-*-linear-gradient (Top,rgb (52,119,182), RGB (74,162,241)) 1px 0 no-repeat,
-*-linear-gradient (Top,rgb (52,118,181), RGB (36,90,141)) left top no-repeat;
}
/* Custom check box effect * *
. login-form. Account-control Input {
width:0px;
height:0px;
}
. login-form Label.check {
Position:absolute;
left:0;
top:50%;
MARGIN:-8PX 0;
Display:inline-block;
width:16px;
height:16px;
line-height:16px;
Text-align:center;
border-radius:2px;
Background:-*-linear-gradient (Top,rgb (255,255,255), RGB (246,246,246)) 1px 1px no-repeat,
-*-linear-gradient (Top,rgb (227,227,230), RGB (165,165,165)) left top no-repeat;
background-size:14px 14px,16px 16px;
}
. login-form. Account-control input:checked + Label.check:before {
Content:attr (data-on);
Font-family:loginform-icon;
}
/* Call Server Font * *
@font-face {
font-family: ' Loginform-icon ';
Src:url ("Font/loginform-icon.eot");
Src:url ("Font/loginform-icon.eot #iefix") format (' Embedded-opentype '),
URL ("Font/loginform-icon.woff") format (' Woff '),
URL ("Font/loginform-icon.ttf") format (' TrueType '),
URL ("Font/loginform-icon.svg#loginform-icon") format (' SVG ');
Font-weight:normal;
Font-style:normal;
}