超酷HTML5和CSS3实现的登录及其注册功能表单

在线演示  本地下载

过去我们开发登录和注册功能大都使用javascript来实现，今天我们介绍的这个登录及其注册表单不走常人路，使用纯CSS3和HTML5来实现同样的功能。

这里我们使用CSS3的伪类:target。我们使用CSS3和图标字体。主要的想法是展示登录表单并且提供一个链接可以转向注册表单。

请大家注意这里只是一个简单的演示，不是所有的浏览器都支持:target，如果你需要在产品环境中使用，你需要使用对应的代码来处理对于老浏览器支持的fallback。

HTML

在html代码中，我们构建俩个表单并且把第二个表单隐藏。如下：

<div id="container_demo" >
    <!-- hidden anchor to stop jump http://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target#wrap4  -->
    <a class="hiddenanchor" id="toregister"></a>
    <a class="hiddenanchor" id="tologin"></a>
    <div id="wrapper">
        <div id="login" class="animate form">
            <form  action="mysuperscript.php" autocomplete="on">
                <h1>Log in</h1>
                <p>
                    <label for="username" class="uname" data-icon="u" > Your email or username </label>
                    <input id="username" name="username" required="required" type="text" placeholder="myusername or mymail@mail.com"/>
                </p>
                <p>
                    <label for="password" class="youpasswd" data-icon="p"> Your password </label>
                    <input id="password" name="password" required="required" type="password" placeholder="eg. X8df!90EO" />
                </p>
                <p class="keeplogin">
                    <input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping" />
                    <label for="loginkeeping">Keep me logged in</label>
                </p>
                <p class="login button">
                    <input type="submit" value="Login" />
                </p>
                <p class="change_link">
                    Not a member yet ?
                    <a href="#toregister" class="to_register">Join us</a>
                </p>
            </form>
        </div>
 
        <div id="register" class="animate form">
            <form  action="mysuperscript.php" autocomplete="on">
                <h1> Sign up </h1>
                <p>
                    <label for="usernamesignup" class="uname" data-icon="u">Your username</label>
                    <input id="usernamesignup" name="usernamesignup" required="required" type="text" placeholder="mysuperusername690" />
                </p>
                <p>
                    <label for="emailsignup" class="youmail" data-icon="e" > Your email</label>
                    <input id="emailsignup" name="emailsignup" required="required" type="email" placeholder="mysupermail@mail.com"/>
                </p>
                <p>
                    <label for="passwordsignup" class="youpasswd" data-icon="p">Your password </label>
                    <input id="passwordsignup" name="passwordsignup" required="required" type="password" placeholder="eg. X8df!90EO"/>
                </p>
                <p>
                    <label for="passwordsignup_confirm" class="youpasswd" data-icon="p">Please confirm your password </label>
                    <input id="passwordsignup_confirm" name="passwordsignup_confirm" required="required" type="password" placeholder="eg. X8df!90EO"/>
                </p>
                <p class="signin button">
                    <input type="submit" value="Sign up"/>
                </p>
                <p class="change_link">
                    Already a member ?
                    <a href="#tologin" class="to_register"> Go and log in </a>
                </p>
            </form>
        </div>
    </div>
</div> 

我 们在这里添加了HTML5相关元素，并且使用了一些新的输入控件。input=password自动隐藏用户输入。input=email使得浏览器检查 是否用户输入是正确的email。同时我们添加了require=required属性。支持这个属性的浏览器将不允许用户递交表单除非所有的输入区域都 是正确，大家可能注意到这里不需要使用javascript。autocomplete=on属性将会基于用户输入预先的填入内容。我们同时也可以使用一 些不错的placeholder来提示用户应该输入的内容。

接下来可能是俩个比较有趣的部分。你或许注意到了顶端的俩个<a href>链接。这是一个能够帮助我们的表单更加方便的使用anchor处理的小技巧，这样当我们点击切换链接并且触发:target的时候将不会跨越很长的页面。

第二个小技巧是使用icon字体。我们将会使用一个data-attribute来展示图标。通过使用对应的字符来设定data-icon="icon_charactoer"，我们只需要一个CSS属性选择器来样式化所有的图标。如果你对这个有兴趣，可以阅读：24 Ways: Displaying Icons with Fonts and Data- Attributes。

CSS

为了使得代码更加清晰，在教程里我们忽略了浏览器提供商指定的前缀， 当然你可以在对应代码中找到相关的设定。当然我们使用了很多不错的CSS3技巧可能不在所有的浏览器中生效。

俩个表单的样式

首先我们配置容器的样式：

#subscribe,
#login{
    position: absolute;
    top: 0px;
    width: 88%;
    padding: 18px 6% 60px 6%;
    margin: 0 0 35px 0;
    background: rgb(247, 247, 247);
    border: 1px solid rgba(147, 184, 189,0.8);
    box-shadow:
        0pt 2px 5px rgba(105, 108, 109,  0.7),
        0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
    border-radius: 5px;
}
#login{
    z-index: 22;
}

这里我们添加了一个漂亮的盒式阴影(box shadow)来创建2个阴影：一个inset用来创建内部蓝色，还有一个外部阴影。这里我们稍微解释一下z-index。

在下面代码中，我们定义了标题的样式，使用了background-clip。

/**** general text styling ****/
#wrapper h1{
    font-size: 48px;
    color: rgb(6, 106, 117);
    padding: 2px 0 10px 0;
    font-family: 'FranchiseRegular','Arial Narrow',Arial,sans-serif;
    font-weight: bold;
    text-align: center;
    padding-bottom: 30px;
}
 
/** For the moment only webkit supports the background-clip:text; */
#wrapper h1{
    background:
    -webkit-repeating-linear-gradient(-45deg,
        rgb(18, 83, 93) ,
        rgb(18, 83, 93) 20px,
        rgb(64, 111, 118) 20px,
        rgb(64, 111, 118) 40px,
        rgb(18, 83, 93) 40px);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
 
#wrapper h1:after{
    content:' ';
    display:block;
    width:100%;
    height:2px;
    margin-top:10px;
    background:
        linear-gradient(left,
            rgba(147,184,189,0) 0%,
            rgba(147,184,189,0.8) 20%,
            rgba(147,184,189,1) 53%,
            rgba(147,184,189,0.8) 79%,
            rgba(147,184,189,0) 100%);
}

大 家注意目前只有webkit的浏览器支持background-clip，所以我们将只为webkit创建条纹式的背景，我们将这个特效添加到H1标题。 因为目前只能在webkit浏览器上生效，我们将使用webkit前缀。只使用-webkit-prefix是一个糟糕的习惯，这里只是为了演示，你不应 该在一个正式的网站中使用！-webkit-text-fill-color:trasparent帮助你生成一个透明的背景。当然其它浏览器都会忽略。

我们使用:after伪类来在标题下创建了一个淡出的直线效果。我们对直线两端使用2px的高度渐变并且淡出背景到0。

接下来我们使的输入更好漂亮。

/**** advanced input styling ****/
/* placeholder */
::-webkit-input-placeholder  {
    color: rgb(190, 188, 188);
    font-style: italic;
}
input:-moz-placeholder,
textarea:-moz-placeholder{
    color: rgb(190, 188, 188);
    font-style: italic;
}
input {
  outline: none;
}

首先我们定义了input样式并且删除了outline。注意outline帮助用户知道目前聚焦到那个输入项，如果你删除你应该提供:active和:focus。

/* all the input except submit and checkbox */
#wrapper input:not([type="checkbox"]){
    width: 92%;
    margin-top: 4px;
    padding: 10px 5px 10px 32px;
    border: 1px solid rgb(178, 178, 178);
    box-sizing : content-box;
    border-radius: 3px;
    box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
    transition: all 0.2s linear;
}
#wrapper input:not([type="checkbox"]):active,
#wrapper input:not([type="checkbox"]):focus{
    border: 1px solid rgba(91, 90, 90, 0.7);
    background: rgba(238, 236, 240, 0.2);
    box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
}

这里我们使用:not pseudo class，来定义所有input样式，除了checkbox。我提供了一个:focus和:active状态，因为我们要删除outline。

接 下来我们介绍icon字体部分。因为对于input来说我们没有办法添加:before和:class伪类，所以我们需要作弊一下：我们添加icon到 label，然后添加到input中。这里我们使用fontomas library的图标。 记得data-icon属性吧？在这里我们使用data-icon='u'代表用户，'e'代表电子邮件，'p'代表密码。一旦选择这些字母，我们下载字 体，并且使用fontsquirrel font generator来将他们生成@font-face兼容格式。

@font-face {
    font-family: 'FontomasCustomRegular';
    src: url('fonts/fontomas-webfont.eot');
    src: url('fonts/fontomas-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/fontomas-webfont.woff') format('woff'),
         url('fonts/fontomas-webfont.ttf') format('truetype'),
         url('fonts/fontomas-webfont.svg#FontomasCustomRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
 
/** the magic icon trick ! **/
[data-icon]:after {
    content: attr(data-icon);
    font-family: 'FontomasCustomRegular';
    color: rgb(106, 159, 171);
    position: absolute;
    left: 10px;
    top: 35px;
    width: 30px;
}

没错，你不需要为每一个图标设置class。我们使用content:attr(data-icon)来取得字母，因此我们只需要申明字体，选择颜色并且定义位置。

接下来我们定义递交按钮：

/*styling both submit buttons */
#wrapper p.button input{
    width: 30%;
    cursor: pointer;
    background: rgb(61, 157, 179);
    padding: 8px 5px;
    font-family: 'BebasNeueRegular','Arial Narrow',Arial,sans-serif;
    color: #fff;
    font-size: 24px;
    border: 1px solid rgb(28, 108, 122);
    margin-bottom: 10px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    box-shadow:
        0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,
        0px 0px 0px 3px rgb(254, 254, 254),
        0px 5px 3px 3px rgb(210, 210, 210);
    transition: all 0.2s linear;
}
#wrapper p.button input:hover{
    background: rgb(74, 179, 198);
}
#wrapper p.button input:active,
#wrapper p.button input:focus{
    background: rgb(40, 137, 154);
    position: relative;
    top: 1px;
    border: 1px solid rgb(12, 76, 87);
    box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
}
p.login.button,
p.signin.button{
    text-align: right;
    margin: 5px 0;
}

这里我们主要使用box-shadow来创建多余的border。你可以使用一个边框，但是也可以创建更多。我们使用length数值来创建一个假的白色边框，3px宽，没有模糊。

开发完毕，希望大家喜欢这个教程，如果你想看到所有效果，使用Chrome来运行在线演示吧，谢谢大家支持！