HTML5和CS3,制作的登录框效果

来源：互联网发布：网络歌手名字大全编辑：程序博客网时间：2024/06/14 07:27

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

login.html

<form id="login">    <h1>Log In</h1> <fieldset id="inputs">        <input id="username" type="text" placeholder="Username" autofocus required>        <input id="password" type="password" placeholder="Password" required> </fieldset>    <fieldset id="actions"> <input type="submit" id="submit" value="Log in"> <a href="">Forgot your password?</a><a href="">Register</a> </fieldset></form>

所用到的 HTML5 的特性：

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;}

最终结果

View demo

结论

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