设计登录页面HTML5 css,HTML5和CSS3登录页面制作实录

本文详细介绍使用HTML5 和CSS3 制作一个登录页面的完整过程。

login.html

Log In

Forgot your password?Register

所用到的HTML 5的特性：

◆ placeholder – 输入框的简短提示，当该输入框获得输入焦点时，该提示信息自动消失

◆ required – 指定该输入元素是否必须提供

◆ autofocus – 指定输入框是否在页面加载完毕自动获取输入焦点

◆ type=”password” – 指定密码输入(非HTML5专有)

CSS

在这里我们用到了 CSS3 的一些专有属性，包括：

Box-shadow可以帮我们制作效果很好的边框阴影

#login{box-shadow:0 0 2px rgba(0, 0, 0, 0.2),

0 1px 1px rgba(0, 0, 0, .2),

0 3px 0 #fff,

0 4px 0 rgba(0, 0, 0, .2),

0 6px 0 #fff,

0 7px 0 rgba(0, 0, 0, .2);

}

Stitch effect (缝效果)

#login{position:absolute;z-index:0;

}#login:before{content:'';position:absolute;z-index:-1;border:1px dashed #ccc;top:5px;bottom:5px;left:5px;right:5px;-moz-box-shadow:0 0 0 1px #fff;-webkit-box-shadow:0 0 0 1px #fff;box-shadow:0 0 0 1px #fff;

}

Subtle gradient lines (微妙的渐变线)

h1{text-shadow:0 1px 0 rgba(255, 255, 255, .7), 0px 2px 0 rgba(0, 0, 0, .5);text-transform:uppercase;text-align:center;color:#666;margin:0 0 30px 0;letter-spacing:4px;font:normal 26px/1 Verdana, Helvetica;position:relative;

}h1:after, h1:before{background-color:#777;content:"";height:1px;position:absolute;top:15px;width:120px;

}h1:after{background-image:-webkit-gradient(linear, left top, right top, from(#777), to(#fff));background-image:-webkit-linear-gradient(left, #777, #fff);background-image:-moz-linear-gradient(left, #777, #fff);background-image:-ms-linear-gradient(left, #777, #fff);background-image:-o-linear-gradient(left, #777, #fff);background-image:linear-gradient(left, #777, #fff);right:0;

}h1:before{background-image:-webkit-gradient(linear, right top, left top, from(#777), to(#fff));background-image:-webkit-linear-gradient(right, #777, #fff);background-image:-moz-linear-gradient(right, #777, #fff);background-image:-ms-linear-gradient(right, #777, #fff);background-image:-o-linear-gradient(right, #777, #fff);background-image:linear-gradient(right, #777, #fff);left:0;

}

最终结果

结论

在一些老的浏览器上也表现不错，下图是在IE8下的效果：