The use of HTML5 + CSS3 and CSS filters to make a beautiful login interface, useless to the image

Many people worry that the project does not have a simple and elegant logon page. Today, there are not many things to do at work, I read an article in 51cto about "using HTML 5 and CSS3 to complete the steps for creating a logon page", and I made it by myself. Now I can post the code, I personally think that ie6 will be discarded in the near future, so the code on this logon page ignores the situation in ie6.
The Code is as follows:
1. <! Doctype html>
2. 3. 4. <meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
5. <meta http-equiv = "description" content = "use CSS3 and CSS filters to create a beautiful logon interface, which is useless to pictures! ">
6. <meta http-equiv = "author" content = "chenjinfei">
7. <meta http-equiv = "date" content = "2012-2-6">
8. <title> logon </title>
9. <link rel = "stylesheet" href = "style/common/common.css">
10. <style type = "text/css">
11. body {
12. margin: 0;
13. padding: 0;
14. background-color: # E4E8EC;
15 .}
16. wrap {
17. margin: 150px auto;
18. width: pixel PX;
19. overflow: hidden;
20 .}
21. loginForm {
22. box-shadow: 0 0 2px rgba (0, 0, 0, 0.2), 0 1px 1px rgba (0, 0, 0, 0.2), 0 3px 0 # fff, 0 4px 0 rgba (0, 0, 0, 0.2), 0 6px 0 # fff, 0 7px 0 rgba (0, 0, 0, 0.2 );
23. position: absolute;
24. z-index: 0;
25. background-color: # FFF;
26. border-radius: 4px;
27. height: 250px;
28. width: pixel PX;
29. background:-webkit-gradient (linear, left top, left 24, from (# EEE), color-stop (4%, # FFF), to (# EEE ));
30. background:-moz-linear-gradient (top, # EEE, # FFF 1px, # EEE 24px );
31. background:-o-linear-gradient (top, # EEEEEE, # FFFFFF 1px, # EEEEEE 24px );
32 .}
33.. loginForm: before {
34. content :'';
35. position: absolute;
36. z-index:-1;
37. border: 1px dashed # CCC;
38. top: 5px;
39. bottom: 5px;
40. left: 5px;
41. right: 5px;
42. box-shadow: 0 0 0 1px # FFF;
43 .}
44. loginForm h1 {
45. text-shadow: 0 1px 0 rgba (255,255,255,. 7), 0px 2px 0 rgba (0, 0, 0,. 5 );
46. text-transform: uppercase;
47. text-align: center;
48. color: #666;
49. line-height: 3em;
50. margin: 16px 0 20px 0;
51. letter-spacing: 4px;
52. font: normal 26px/1 Microsoft YaHei, sans-serif;
53 .}
54. fieldset {
55. border: none;
56. padding: 10px 10px 0;
57 .}
58. fieldset input [type = text] {
59. background: url (style/default/images/user.png) 4px 5px no-repeat;
60 .}
61. fieldset input [type = password] {
62. background: url (style/default/images/password.png) 4px 5px no-repeat;
63 .}
64. fieldset input [type = text], fieldset input [type = password] {
65. width: 100%;
66. line-height: 2em;
67. font-size: 12px;
68. height: 24px;
69. border: none;
70. padding: 3px 4px 3px 2.2em;
71. width: 300px;
72 .}
73. fieldset input [type = submit] {
74. text-align: center;
75. padding: 2px 20px;
76. line-height: 2em;
77. border: 1px solid # FF1500;
78. border-radius: 3px;
79. background:-webkit-gradient (linear, left top, left 24, from (# FF6900), color-stop (0%, # FF9800), to (# FF6900 ));
80. background:-moz-linear-gradient (top, # FF6900, # FF9800 0, # FF6900 24px );
81. background:-o-linear-gradient (top, # FF6900, # FF9800 0, # FF6900 24px );
82. filter: progid: DXImageTransform. Microsoft. gradient (startColorstr = '# FF9800', endColorstr = '# FF6900 ');
83.-ms-filter: "progid: DXImageTransform. Microsoft. gradient (startColorstr = '# FF9800', endColorstr = '# FF6900 ')";
84. height: 30px;
85. cursor: pointer;
86. letter-spacing: 4px;
87. margin-left: 10px;
88. color: # FFF;
89. font-weight: bold;
90 .}
91. fieldset input [type = submit]: hover {
92. background:-webkit-gradient (linear, left top, left 24, from (# FF9800), color-stop (0%, # FF6900), to (# FF9800 ));
93. background:-moz-linear-gradient (top, # FF9800, # FF6900 0, # FF9800 24px );
94. background:-o-linear-gradient (top, # FF6900, # FF6900 0, # FF9800 24px );
95. filter: progid: DXImageTransform. Microsoft. gradient (startColorstr = '# FF6900', endColorstr = '# FF9800 ');
96.-ms-filter: "progid: DXImageTransform. Microsoft. gradient (startColorstr = '# FF6900', endColorstr = '# FF9800 ')";
97 .}
98 .. inputWrap {
99. background:-webkit-gradient (linear, left top, left 24, from (# FFFFFF), color-stop (4%, # EEEEEE), to (# FFFFFF ));
100. background:-moz-linear-gradient (top, # FFFFFF, # EEEEEE 1px, # FFFFFF 24px );
101. background:-o-linear-gradient (top, # FFFFFF, # EEEEEE 1px, # FFFFFF 24px );
102. border-radius: 3px;
103. border: 1px solid # CCC;
104. margin: 10px 10px 0;
105. filter: progid: DXImageTransform. Microsoft. gradient (startColorstr = '# eeeeeee', endColorstr =' # ffff ');
106.-ms-filter: "progid: DXImageTransform. Microsoft. gradient (startColorstr = '# eeeeee', endColorstr =' # ffff ')";
107 .}
108. fieldset input [type = checkbox] {
109. margin-left: 10px;
110. vertical-align: middle;
111 .}
112. fieldset {
113. color: blue;
114. font-size: 12px;
115. margin: 6px 0 0 10px;
116. text-decoration: none;
117 .}
118. fieldset a: hover {
119. text-decoration: underline;
120 .}
121. fieldset span {
122. font-size: 12px;
123 .}
124. </style>
125. <! -- To enable IE to support HTML5 elements, perform the following operations: -->
126. <! -- [If IE]>
127. <script type = "text/javascript">
128.doc ument. createElement ("section ");
129.doc ument. createElement ("header ");
130.doc ument. createElement ("footer ");
131. </script>
132. <! [Endif] -->
133. 134.
135. <body>
136. <div class = "wrap">
137. <form action = "#" method = "post">
138. <section class = "loginForm">
139. 140. 141. 142. <div class = "loginForm_content">
143. <fieldset>
144. <div class = "inputWrap">
145. <input type = "text" name = "userName" placeholder = "email/member account/mobile phone number" autofocus required>
146. </div>
147. <div class = "inputWrap">
148. <input type = "password" name = "password" placeholder = "enter the password" required>
149. </div>
150. </fieldset>
151. <fieldset>
152. <input type = "checkbox" checked = "checked">
153. <span> next Automatic Logon </span>
154. </fieldset>
155. <fieldset>
156. <input type = "submit" value = "login">
157. <a href = "#"> forgot password? </A> <a href = "#"> register </a>
158. </fieldset>
159. </div>
160. </section>
161. </form>
162. </div>
163. </body>
164. Of course, there will be a lot of intuitive pictures:


 
This article is from the "html5 + css3" blog