過去我們開發登錄和注冊功能大都使用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來運行在線演示吧，謝謝大家支持！