本文详细介绍使用 HTML5 和 CSS3 制作一个登录页面的完整过程。
View demo
login.html
03 | < fieldset id = "inputs" > |
04 | < input id = "username" type = "text" placeholder = "Username" autofocus required> |
05 | < input id = "password" type = "password" placeholder = "Password" required> |
07 | < fieldset id = "actions" > |
08 | < input type = "submit" id = "submit" value = "Log in" > |
09 | < a href = "" >Forgot your password?</ a >< a href = "" >Register</ a > |
所用到的 HTML5 的特性:
-
- placeholder – 输入框的简短提示,当该输入框获得输入焦点时,该提示信息自动消失
- required – 指定该输入元素是否必须提供
- autofocus – 指定输入框是否在页面加载完毕自动获取输入焦点
- type=”password” – 指定密码输入(非HTML5专有)
CSS
在这里我们用到了 CSS3 的一些专有属性,包括:
Box-shadow 可以帮我们制作效果很好的边框阴影
04 | 0 0 2px rgba( 0 , 0 , 0 , 0.2 ), |
05 | 0 1px 1px rgba( 0 , 0 , 0 , . 2 ), |
07 | 0 4px 0 rgba( 0 , 0 , 0 , . 2 ), |
09 | 0 7px 0 rgba( 0 , 0 , 0 , . 2 ); |
Stitch effect (缝效果)
12 | border : 1px dashed #ccc ; |
17 | -moz-box-shadow: 0 0 0 1px #fff ; |
18 | -webkit-box-shadow: 0 0 0 1px #fff ; |
19 | box-shadow: 0 0 0 1px #fff ; |
Subtle gradient lines (微妙的渐变线)
03 | text-shadow : 0 1px 0 rgba( 255 , 255 , 255 , . 7 ), 0px 2px 0 rgba( 0 , 0 , 0 , . 5 ); |
04 | text-transform : uppercase ; |
09 | font : normal 26px / 1 Verdana , Helvetica ; |
15 | background-color : #777 ; |
25 | background-image : -webkit-gradient(linear, left top , right top , from( #777 ), to( #fff )); |
26 | background-image : -webkit-linear-gradient( left , #777 , #fff ); |
27 | background-image : -moz-linear-gradient( left , #777 , #fff ); |
28 | background-image : -ms-linear-gradient( left , #777 , #fff ); |
29 | background-image : -o-linear-gradient( left , #777 , #fff ); |
30 | background-image : linear-gradient( left , #777 , #fff ); |
36 | background-image : -webkit-gradient(linear, right top , left top , from( #777 ), to( #fff )); |
37 | background-image : -webkit-linear-gradient( right , #777 , #fff ); |
38 | background-image : -moz-linear-gradient( right , #777 , #fff ); |
39 | background-image : -ms-linear-gradient( right , #777 , #fff ); |
40 | background-image : -o-linear-gradient( right , #777 , #fff ); |
41 | background-image : linear-gradient( right , #777 , #fff ); |
最终结果
View demo
结论
在一些老的浏览器上也表现不错,下图是在IE8下的效果: