在線演示 本地下載

過去我們開發(fā)登錄和注冊功能大都使用javascript來實現(xiàn)，今天我們介紹的這個登錄及其注冊表單不走常人路，使用純CSS3和HTML5來實現(xiàn)同樣的功能。

這里我們使用CSS3的偽類:target。我們使用CSS3和圖標字體。主要的想法是展示登錄表單并且提供一個鏈接可以轉(zhuǎn)向注冊表單。

請大家注意這里只是一個簡單的演示，不是所有的瀏覽器都支持:target，如果你需要在產(chǎn)品環(huán)境中使用，你需要使用對應(yīng)的代碼來處理對于老瀏覽器支持的fallback。

HTML

在html代碼中，我們構(gòu)建倆個表單并且把第二個表單隱藏。如下：

<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相關(guān)元素，并且使用了一些新的輸入控件。input=password自動隱藏用戶輸入。input=email使得瀏覽器檢查 是否用戶輸入是正確的email。同時我們添加了require=required屬性。支持這個屬性的瀏覽器將不允許用戶遞交表單除非所有的輸入?yún)^(qū)域都 是正確，大家可能注意到這里不需要使用javascript。autocomplete=on屬性將會基于用戶輸入預(yù)先的填入內(nèi)容。我們同時也可以使用一 些不錯的placeholder來提示用戶應(yīng)該輸入的內(nèi)容。

接下來可能是倆個比較有趣的部分。你或許注意到了頂端的倆個<a href>鏈接。這是一個能夠幫助我們的表單更加方便的使用anchor處理的小技巧，這樣當我們點擊切換鏈接并且觸發(fā):target的時候?qū)⒉粫缭胶荛L的頁面。

第二個小技巧是使用icon字體。我們將會使用一個data-attribute來展示圖標。通過使用對應(yīng)的字符來設(shè)定data-icon="icon_charactoer"，我們只需要一個CSS屬性選擇器來樣式化所有的圖標。如果你對這個有興趣，可以閱讀：24 Ways: Displaying Icons with Fonts and Data- Attributes。

CSS

為了使得代碼更加清晰，在教程里我們忽略了瀏覽器提供商指定的前綴， 當然你可以在對應(yīng)代碼中找到相關(guān)的設(shè)定。當然我們使用了很多不錯的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)來創(chuàng)建2個陰影：一個inset用來創(chuàng)建內(nèi)部藍色，還有一個外部陰影。這里我們稍微解釋一下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創(chuàng)建條紋式的背景，我們將這個特效添加到H1標題。 因為目前只能在webkit瀏覽器上生效，我們將使用webkit前綴。只使用-webkit-prefix是一個糟糕的習(xí)慣，這里只是為了演示，你不應(yīng) 該在一個正式的網(wǎng)站中使用！-webkit-text-fill-color:trasparent幫助你生成一個透明的背景。當然其它瀏覽器都會忽略。

我們使用:after偽類來在標題下創(chuàng)建了一個淡出的直線效果。我們對直線兩端使用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幫助用戶知道目前聚焦到那個輸入項，如果你刪除你應(yīng)該提供: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狀態(tài)，因為我們要刪除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;  
} 

沒錯，你不需要為每一個圖標設(shè)置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來創(chuàng)建多余的border。你可以使用一個邊框，但是也可以創(chuàng)建更多。我們使用length數(shù)值來創(chuàng)建一個假的白色邊框，3px寬，沒有模糊。

開發(fā)完畢，希望大家喜歡這個教程，如果你想看到所有效果，使用Chrome來運行在線演示吧，謝謝大家支持！

原文鏈接：http://www.cnblogs.com/gbin1/archive/2012/04/09/2439806.html

【編輯推薦】

1. 8個非常有用的HTML 5工具你值得擁有
2. 6個優(yōu)秀的HTML 5/CSS3演示PPT框架推薦
3. 解決跨平臺問題的終極密鑰就是HTML 5?
4. HTML 5開發(fā)：地理位置定位指南
5. 一句代碼實現(xiàn)HTML 5淘寶語音搜索