<! DOCTYPE html>
<meta charset= "UTF-8" >
<TITLE>CSS3 Making 3D Forms </title>
<style type= "text/css" >
body{
Background-color: #f7f0da;
Background-image:-webkit-linear-gradient (180deg,transparent 90%, #eae4cf 10%);
Background-image:-moz-linear-gradient (180deg,transparent 90%, #eae4cf 10%);
Background-image:-o-linear-gradient (180deg,transparent 90%, #eae4cf 10%);
Background-image:-ms-linear-gradient (180deg,transparent 90%, #eae4cf 10%);
Background-image:linear-gradient (180deg,transparent 90%, #eae4cf 10%);
background-size:5px 50px;
}
. box{
margin:20px auto;
width:560px;
text-align:center;
font-weight:bold;
}
. Box div:first-child{
font-size:60px;
margin-bottom:20px;
text-shadow:0 2px 0 #c0c0c0, 0 3px #979385;
}
. box. input_control{
position:relative;
height:100px;
}
. Box input{
position:relative;
font-size:18px;
height:56px;
width:100%;
padding-left:10px;
BORDER:12PX Solid #fff;
border-radius:3px;
Box-shadow:inset 0 0 0 1px #c0c0c0, inset 1px 2px 0 #e6e6e6, 1px 2px 0 #c0c0c0, -1px 2px 0 #c0c0c0, 2px 3px 0 #c0c0c0, -2px 3px 0 #c0c0c0, 2px 12px 0 #c0c0c0, -2px 12px 0 #c0c0c0, 0 2px 0 3px #979797, 0 10px 0 3px #979797, -2px 15px 10px rgba (0,0,0,.6);
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
-webkit-transition:all 0.1s ease-in;
-moz-transition:all 0.1s ease-in;
-ms-transition:all 0.1s ease-in;
-o-transition:all 0.1s ease-in;
Transition:all 0.1s ease-in;
}
. Box label{
position:absolute;
top:-2px;
right:50px;
width:74px;
height:56px;
Color: #f3f2f1;
text-shadow:0 3px 1px #9e2719;
BORDER:1PX Solid #dd684f;
Background:-webkit-linear-gradient (top, #e78d7b 0, #dd684f 72px);
Background:-moz-linear-gradient (top, #e78d7b 0, #dd684f 72px);
Background:-o-linear-gradient (top, #e78d7b 0, #dd684f 72px);
Background:-ms-linear-gradient (top, #e78d7b 0, #dd684f 72px);
Background:linear-gradient (top, #e78d7b 0, #dd684f 72px);
box-shadow:0 14px 0 #9c2912, 0 0 5px Rgba (0,0,0,.3);
-webkit-transition:all 0.1s ease-in;
-moz-transition:all 0.1s ease-in;
-o-transition:all 0.1s ease-in;
-ms-transition:all 0.1s ease-in;
Transition:all 0.1s ease-in;
}
. Box label:after{
position:absolute;
display:block;
width:74px;
text-align:center;
Font:normal normal 30px/56px ' Icomoon ';
speak:none;
-webkit-font-smoothing:antialiased;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
font-smoothing:antialiased;
}
. Input_control:nth-of-type (2) label:after{
Content: "\21";
}
. Input_control:nth-of-type (3) label:after{
Content: "\22";
}
. Input_control:nth-of-type (4) label:after{
Content: "\23";
}
. Box input:focus{
outline:0 none;
top:2px;
Box-shadow:inset 0 0 0 1px #c0c0c0, inset 1px 2px 0 #e6e6e6, 1px 2px 0 #c0c0c0, -1px 2px 0 #c0c0c0, 1px 3px 0 #c0c0c0, -2px 3px 0 #c0c0c0, 2px 12px 0 #c0c0c0, -2px 12px 0 #c0c0c0, 0 2px 0 3px #979797, 0 10px 0 3px #979797, -2px 15px 10px rgba (0,0,0,.6);
}
. Box Input:focus + label{
top:0;
}
::-webkit-input-placeholder {
Color: #d94a2d;
font-style:italic;
}
. box. btn{
position:relative;
width:210px;
height:60px;
Color: #4c6e03;
Font:bold 35px "Impact";
text-indent:10px;
letter-spacing:3px;
text-align:left;
margin-bottom:20px;
border:none;
border-radius:6px;
text-shadow:-1px 2px 0 #c4e184;
box-shadow:1px 2px 0 #5f8214, -1px 2px 0 #5f8214, 2px 3px 0 #5f8214, -2px 3px 0 #5f8214, 2px 12px 0 #5f8214, -2px 12px 0 #5f821 4,0 2px 0 3px #304601, 0 10px 0 3px #304601, -2px 15px 10px rgba (0,0,0,.6);
Background:-webkit-linear-gradient (top, #c5e185, #a5c65c);
-webkit-transition:all 0.1s ease-in;
-moz-transition:all 0.1s ease-in;
-o-transition:all 0.1s ease-in;
-ms-transition:all 0.1s ease-in;
Transition:all 0.1s ease-in;
}
. box. btn:after{
position:absolute;
display:block;
Content: "\25";
width:36px;
height:36px;
border-radius:18px;
Background: #5f8214;
top:10px;
right:20px;
text-indent:5px;
text-align:center;
Color: #b3d36e;
text-shadow:0 3px 0 #325207;
Box-shadow:inset 0 6px 0 #325207;
Font:normal normal 18px/40px ' Icomoon ';
speak:none;
-webkit-font-smoothing:antialiased;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
font-smoothing:antialiased;
}
. box. btn:hover{
Background:-webkit-linear-gradient (top, #a2c452, #a5c65c);
Background:-moz-linear-gradient (top, #a2c452, #a5c65c);
Background:-ms-linear-gradient (top, #a2c452, #a5c65c);
Background:-o-linear-gradient (top, #a2c452, #a5c65c);
Background:linear-gradient (top, #a2c452, #a5c65c);
}
. box. btn:active{
top:2px;
box-shadow:1px 2px 0 #a5c65c, -1px 2px 0 #a5c65c, 1px 3px 0 #a5c65c, -2px 3px 0 #5f8214, 2px 12px 0 #5f8214, -2px 12px 0 #5f821 4,0 2px 0 3px #5f8214, 0 10px 0 3px #304601, -2px 15px 10px rgba (0,0,0,.6);
}
. Box P a{
Color: #d94a2d;
line-height:30px;
font-size:14px;
}
@font-face {
Font-family: ' Icomoon ';
Src:url (' Fonts/icomoon.eot ');
Src:url (' fonts/icomoon.eot #iefix ') format (' embedded-opentype '),
URL (' fonts/icomoon.svg#icomoon ') format (' svg '),
URL (' fonts/icomoon.woff ') format (' woff '),
URL (' fonts/icomoon.ttf ') format (' TrueType ');
font-weight:normal;
font-style:normal;
}
</style>
<body>
<div><a href= "http://www.999jiujiu.com/" >http://www.999jiujiu.com/</A></div>
<div class= "page" >
<section class= "demo" >
<div class= "box" >
<form>
<div>secure login</div>
<div class= "input_control" >
<input type= "text" id= "inputname" placeholder= "Your Name" >
<label for= "inputname" ></label>
</div>
<div class= "input_control" >
<input type= "text" id= "inputemail" placeholder= "Your Email" >
<label for= "inputname" ></label>
</div>
<div class= "input_control" >
<input type= "password" id= "inputpassword" placeholder= "******" >
<label for= "inputname" ></label>
</div>
<div>
<button type= "submit" class= "btn" >LOGIN</button>
</div>
</form>
</div>
</section>
</div>
</body>
CSS3 make Beautiful 3D forms
