Ajax Loader
×

http://cssdeck.com/labs/fdeozwzf

This is an example how to create a simple login form using HTML5 and CSS3. This form uses pseudo elements (:after and :before) to create the multi page effect. These elements are rotated using the CSS3 transform property. This form uses HTML5 to make validation and submission easy.

HTML 
<!DOCTYPE html>
1
<!DOCTYPE html>
2
<!--[if lt IE 7 ]> <html lang="en" class="ie6 ielt8"> <![endif]-->
3
<!--[if IE 7 ]>    <html lang="en" class="ie7 ielt8"> <![endif]-->
4
<!--[if IE 8 ]>    <html lang="en" class="ie8"> <![endif]-->
5
<!--[if (gte IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
6
<head>
7
<meta charset="utf-8">
8
<title>Paper Stack</title>
9
<link rel="stylesheet" type="text/css" href="style.css" />
10
</head>
11
<body>
12
<div class="container">
13
  <section id="content">
14
    <form action="">
15
      <h1>Login Form</h1>
16
      <div>
17
        <input type="text" placeholder="Username" required="" id="username" />
18
      </div>
19
      <div>
20
        <input type="password" placeholder="Password" required="" id="password" />
21
      </div>
22
      <div>
23
        <input type="submit" value="Log in" />
24
        <a href="#">Lost your password?</a>
25
        <a href="#">Register</a>
26
      </div>
27
    </form><!-- form -->
28
    <div class="button">
29
      <a href="#">Download source file</a>
30
    </div><!-- button -->
31
  </section><!-- content -->
32
</div><!-- container -->
33
</body>
34
</html>
 
CSS 
/* Reset CSS */
1
/* Reset CSS */
2
html, body, div, span, applet, object, iframe,
3
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
4
a, abbr, acronym, address, big, cite, code,
5
del, dfn, em, font, img, ins, kbd, q, s, samp,
6
small, strike, strong, sub, sup, tt, var,
7
b, u, i, center,
8
dl, dt, dd, ol, ul, li,
9
fieldset, form, label, legend,
10
table, caption, tbody, tfoot, thead, tr, th, td {
11
  margin: 0;
12
  padding: 0;
13
  border: 0;
14
  outline: 0;
15
  font-size: 100%;
16
  vertical-align: baseline;
17
  background: transparent;
18
}
19
body {
20
  background: #DCDDDF url(http://cssdeck.com/uploads/media/items/7/7AF2Qzt.png);
21
  color: #000;
22
  font: 14px Arial;
23
  margin: 0 auto;
24
  padding: 0;
25
  position: relative;
26
}
27
h1{ font-size:28px;}
28
h2{ font-size:26px;}
29
h3{ font-size:18px;}
30
h4{ font-size:16px;}
31
h5{ font-size:14px;}
32
h6{ font-size:12px;}
33
h1,h2,h3,h4,h5,h6{ color:#563D64;}
34
small{ font-size:10px;}
35
b, strong{ font-weight:bold;}
36
a{ text-decoration: none; }
37
a:hover{ text-decoration: underline; }
38
.left { float:left; }
39
.right { float:right; }
40
.alignleft { float: left; margin-right: 15px; }
41
.alignright { float: right; margin-left: 15px; }
42
.clearfix:after,
43
form:after {
44
  content: ".";
45
  display: block;
46
  height: 0;
47
  clear: both;
48
  visibility: hidden;
49
}
50
.container { margin: 25px auto; position: relative; width: 900px; }
51
#content {
52
  background: #f9f9f9;
53
  background: -moz-linear-gradient(top,  rgba(248,248,248,1) 0%, rgba(249,249,249,1) 100%);
54
  background: -webkit-linear-gradient(top,  rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
55
  background: -o-linear-gradient(top,  rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
56
  background: -ms-linear-gradient(top,  rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
57
  background: linear-gradient(top,  rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
58
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#f9f9f9',GradientType=0 );
59
  -webkit-box-shadow: 0 1px 0 #fff inset;
60
  -moz-box-shadow: 0 1px 0 #fff inset;
61
  -ms-box-shadow: 0 1px 0 #fff inset;
62
  -o-box-shadow: 0 1px 0 #fff inset;
63
  box-shadow: 0 1px 0 #fff inset;
64
  border: 1px solid #c4c6ca;
65
  margin: 0 auto;
66
  padding: 25px 0 0;
67
  position: relative;
68
  text-align: center;
69
  text-shadow: 0 1px 0 #fff;
70
  width: 400px;
71
}
72
#content h1 {
73
  color: #7E7E7E;
74
  font: bold 25px Helvetica, Arial, sans-serif;
75
  letter-spacing: -0.05em;
76
  line-height: 20px;
77
  margin: 10px 0 30px;
78
}
79
#content h1:before,
80
#content h1:after {
81
  content: "";
82
  height: 1px;
83
  position: absolute;
84
  top: 10px;
85
  width: 27%;
86
}
87
#content h1:after {
88
  background: rgb(126,126,126);
89
  background: -moz-linear-gradient(left,  rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%);
90
  background: -webkit-linear-gradient(left,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
91
  background: -o-linear-gradient(left,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
92
  background: -ms-linear-gradient(left,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
93
  background: linear-gradient(left,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
94
    right: 0;
95
}
96
#content h1:before {
97
  background: rgb(126,126,126);
98
  background: -moz-linear-gradient(right,  rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%);
99
  background: -webkit-linear-gradient(right,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
100
  background: -o-linear-gradient(right,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
101
  background: -ms-linear-gradient(right,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
102
  background: linear-gradient(right,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
103
    left: 0;
104
}
105
#content:after,
106
#content:before {
107
  background: #f9f9f9;
108
  background: -moz-linear-gradient(top,  rgba(248,248,248,1) 0%, rgba(249,249,249,1) 100%);
109
  background: -webkit-linear-gradient(top,  rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
110
  background: -o-linear-gradient(top,  rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
111
  background: -ms-linear-gradient(top,  rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
112
  background: linear-gradient(top,  rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
113
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#f9f9f9',GradientType=0 );
114
  border: 1px solid #c4c6ca;
115
  content: "";
116
  display: block;
117
  height: 100%;
118
  left: -1px;
119
  position: absolute;
120
  width: 100%;
121
}
122
#content:after {
123
  -webkit-transform: rotate(2deg);
124
  -moz-transform: rotate(2deg);
125
  -ms-transform: rotate(2deg);
126
  -o-transform: rotate(2deg);
127
  transform: rotate(2deg);
128
  top: 0;
129
  z-index: -1;
130
}
131
#content:before {
132
  -webkit-transform: rotate(-3deg);
133
  -moz-transform: rotate(-3deg);
134
  -ms-transform: rotate(-3deg);
135
  -o-transform: rotate(-3deg);
136
  transform: rotate(-3deg);
137
  top: 0;
138
  z-index: -2;
139
}
140
#content form { margin: 0 20px; position: relative }
141
#content form input[type="text"],
142
#content form input[type="password"] {
143
  -webkit-border-radius: 3px;
144
  -moz-border-radius: 3px;
145
  -ms-border-radius: 3px;
146
  -o-border-radius: 3px;
147
  border-radius: 3px;
148
  -webkit-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
149
  -moz-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
150
  -ms-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
151
  -o-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
152
  box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
153
  -webkit-transition: all 0.5s ease;
154
  -moz-transition: all 0.5s ease;
155
  -ms-transition: all 0.5s ease;
156
  -o-transition: all 0.5s ease;
157
  transition: all 0.5s ease;
158
  background: #eae7e7 url(http://cssdeck.com/uploads/media/items/8/8bcLQqF.png) no-repeat;
159
  border: 1px solid #c8c8c8;
160
  color: #777;
161
  font: 13px Helvetica, Arial, sans-serif;
162
  margin: 0 0 10px;
163
  padding: 15px 10px 15px 40px;
164
  width: 80%;
165
}
166
#content form input[type="text"]:focus,
167
#content form input[type="password"]:focus {
168
  -webkit-box-shadow: 0 0 2px #ed1c24 inset;
169
  -moz-box-shadow: 0 0 2px #ed1c24 inset;
170
  -ms-box-shadow: 0 0 2px #ed1c24 inset;
171
  -o-box-shadow: 0 0 2px #ed1c24 inset;
172
  box-shadow: 0 0 2px #ed1c24 inset;
173
  background-color: #fff;
174
  border: 1px solid #ed1c24;
175
  outline: none;
176
}
177
#username { background-position: 10px 10px !important }
178
#password { background-position: 10px -53px !important }
179
#content form input[type="submit"] {
180
  background: rgb(254,231,154);
181
  background: -moz-linear-gradient(top,  rgba(254,231,154,1) 0%, rgba(254,193,81,1) 100%);
182
  background: -webkit-linear-gradient(top,  rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
183
  background: -o-linear-gradient(top,  rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
184
  background: -ms-linear-gradient(top,  rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
185
  background: linear-gradient(top,  rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
186
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fee79a', endColorstr='#fec151',GradientType=0 );
187
  -webkit-border-radius: 30px;
188
  -moz-border-radius: 30px;
189
  -ms-border-radius: 30px;
190
  -o-border-radius: 30px;
191
  border-radius: 30px;
192
  -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
193
  -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
194
  -ms-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
195
  -o-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
196
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
197
  border: 1px solid #D69E31;
198
  color: #85592e;
199
  cursor: pointer;
200
  float: left;
201
  font: bold 15px Helvetica, Arial, sans-serif;
202
  height: 35px;
203
  margin: 20px 0 35px 15px;
204
  position: relative;
205
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
206
  width: 120px;
207
}
208
#content form input[type="submit"]:hover {
209
  background: rgb(254,193,81);
210
  background: -moz-linear-gradient(top,  rgba(254,193,81,1) 0%, rgba(254,231,154,1) 100%);
211
  background: -webkit-linear-gradient(top,  rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
212
  background: -o-linear-gradient(top,  rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
213
  background: -ms-linear-gradient(top,  rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
214
  background: linear-gradient(top,  rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
215
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fec151', endColorstr='#fee79a',GradientType=0 );
216
}
217
#content form div a {
218
  color: #004a80;
219
    float: right;
220
    font-size: 12px;
221
    margin: 30px 15px 0 0;
222
    text-decoration: underline;
223
}
224
.button {
225
  background: rgb(247,249,250);
226
  background: -moz-linear-gradient(top,  rgba(247,249,250,1) 0%, rgba(240,240,240,1) 100%);
227
  background: -webkit-linear-gradient(top,  rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);
228
  background: -o-linear-gradient(top,  rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);
229
  background: -ms-linear-gradient(top,  rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);
230
  background: linear-gradient(top,  rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);
231
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f9fa', endColorstr='#f0f0f0',GradientType=0 );
232
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
233
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
234
  -ms-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
235
  -o-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
236
  box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
237
  -webkit-border-radius: 0 0 5px 5px;
238
  -moz-border-radius: 0 0 5px 5px;
239
  -o-border-radius: 0 0 5px 5px;
240
  -ms-border-radius: 0 0 5px 5px;
241
  border-radius: 0 0 5px 5px;
242
  border-top: 1px solid #CFD5D9;
243
  padding: 15px 0;
244
}
245
.button a {
246
  background: url(http://cssdeck.com/uploads/media/items/8/8bcLQqF.png) 0 -112px no-repeat;
247
  color: #7E7E7E;
248
  font-size: 17px;
249
  padding: 2px 0 2px 40px;
250
  text-decoration: none;
251
  -webkit-transition: all 0.3s ease;
252
  -moz-transition: all 0.3s ease;
253
  -ms-transition: all 0.3s ease;
254
  -o-transition: all 0.3s ease;
255
  transition: all 0.3s ease;
256
}
257
.button a:hover {
258
  background-position: 0 -135px;
259
  color: #00aeef;
260
}
 

http://cssdeck.com/labs/fdeozwzf

CSSDeck G+