日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
超酷HTML5和CSS3實現(xiàn)登錄及注冊功能表單

在線演示 本地下載

山東網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)等網(wǎng)站項目制作，到程序開發(fā)，運(yùn)營維護(hù)。成都創(chuàng)新互聯(lián)成立于2013年到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運(yùn)維經(jīng)驗，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)。

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

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

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

HTML

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

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.     
    3. 
  
  
  
  
  3.     
    4. 
  
  
  
  
  4.     
    5. 
  
  
  
  
  5.     
    6. 
  
  
  
  
  6.         
    7. 
  
  
  
  
  7.             
    8. 
  
  
  
  
  8.                 
    Log in
    9. 
  
  
  
  
  9.                 
    10. 
  
  
  
  
  10.                      Your email or username 
    11. 
  
  
  
  
  11.                     
    12. 
  
  
  
  
  12.                 
    13. 
  
  
  
  
  13.                 
    14. 
  
  
  
  
  14.                      Your password 
    15. 
  
  
  
  
  15.                     
    16. 
  
  
  
  
  16.                 
    17. 
  
  
  
  
  17.                 
    18. 
  
  
  
  
  18.                     
    19. 
  
  
  
  
  19.                     Keep me logged in
    20. 
  
  
  
  
  20.                 
    21. 
  
  
  
  
  21.                 
    22. 
  
  
  
  
  22.                     
    23. 
  
  
  
  
  23.                 
    24. 
  
  
  
  
  24.                 
    25. 
  
  
  
  
  25.                     Not a member yet ? 
    26. 
  
  
  
  
  26.                     Join us
    27. 
  
  
  
  
  27.                 
    28. 
  
  
  
  
  28.             
    29. 
  
  
  
  
  29.         
  •  
  •         
  •             
  •                 

     Sign up 

  •                 

  •                     Your username
  •                     
  •                 

  •                 

  •                      Your email
  •                     
  •                 

  •                 

  •                     Your password 
  •                     
  •                 

  •                 

  •                     Please confirm your password 
  •   
  •                 

  •                 
  •                     
  •                 

  •                 
  •                     Already a member ?
  •                      Go and log in 
  •                 

  •             
  •         
  •     
  •  

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

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

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

    CSS

    為了使得代碼更加清晰，在教程里我們忽略了瀏覽器提供商指定的前綴， 當(dāng)然你可以在對應(yīng)代碼中找到相關(guān)的設(shè)定。當(dāng)然我們使用了很多不錯的CSS3技巧可能不在所有的瀏覽器中生效。

    倆個表單的樣式

    首先我們配置容器的樣式：

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

    這里我們添加了一個漂亮的盒式陰影(box shadow)來創(chuàng)建2個陰影：一個inset用來創(chuàng)建內(nèi)部藍(lán)色，還有一個外部陰影。這里我們稍微解釋一下z-index。

    在下面代碼中，我們定義了標(biāo)題的樣式，使用了background-clip。

     
 
 
 
      
  
  
  
  
    1. /**** general text styling ****/
      2. 
  
  
  
  
    2. #wrapper h1{ 
      3. 
  
  
  
  
    3.     font-size: 48px; 
      4. 
  
  
  
  
    4.     color: rgb(6, 106, 117); 
      5. 
  
  
  
  
    5.     padding: 2px 0 10px 0; 
      6. 
  
  
  
  
    6.     font-family: 'FranchiseRegular','Arial Narrow',Arial,sans-serif; 
      7. 
  
  
  
  
    7.     font-weight: bold; 
      8. 
  
  
  
  
    8.     text-align: center; 
      9. 
  
  
  
  
    9.     padding-bottom: 30px; 
      10. 
  
  
  
  
    10. } 
      11. 
  
  
  
  
    11.   
      12. 
  
  
  
  
    12. /** For the moment only webkit supports the background-clip:text; */
      13. 
  
  
  
  
    13. #wrapper h1{ 
      14. 
  
  
  
  
    14.     background: 
      15. 
  
  
  
  
    15.     -webkit-repeating-linear-gradient(-45deg, 
      16. 
  
  
  
  
    16.         rgb(18, 83, 93) , 
      17. 
  
  
  
  
    17.         rgb(18, 83, 93) 20px, 
      18. 
  
  
  
  
    18.         rgb(64, 111, 118) 20px, 
      19. 
  
  
  
  
    19.         rgb(64, 111, 118) 40px, 
      20. 
  
  
  
  
    20.         rgb(18, 83, 93) 40px); 
      21. 
  
  
  
  
    21.     -webkit-text-fill-color: transparent; 
      22. 
  
  
  
  
    22.     -webkit-background-clip: text; 
      23. 
  
  
  
  
    23. } 
      24. 
  
  
  
  
    24.   
      25. 
  
  
  
  
    25. #wrapper h1:after{ 
      26. 
  
  
  
  
    26.     content:' '; 
      27. 
  
  
  
  
    27.     display:block; 
      28. 
  
  
  
  
    28.     width:100%; 
      29. 
  
  
  
  
    29.     height:2px; 
      30. 
  
  
  
  
    30.     margin-top:10px; 
      31. 
  
  
  
  
    31.     background: 
      32. 
  
  
  
  
    32.         linear-gradient(left, 
      33. 
  
  
  
  
    33.             rgba(147,184,189,0) 0%, 
      34. 
  
  
  
  
    34.             rgba(147,184,189,0.8) 20%, 
      35. 
  
  
  
  
    35.             rgba(147,184,189,1) 53%, 
      36. 
  
  
  
  
    36.             rgba(147,184,189,0.8) 79%, 
      37. 
  
  
  
  
    37.             rgba(147,184,189,0) 100%); 
      38. 
  
  
  
  
    38. }
      39.

    大家注意目前只有webkit的瀏覽器支持background-clip，所以我們將只為webkit創(chuàng)建條紋式的背景，我們將這個特效添加到H1標(biāo)題。 因為目前只能在webkit瀏覽器上生效，我們將使用webkit前綴。只使用-webkit-prefix是一個糟糕的習(xí)慣，這里只是為了演示，你不應(yīng) 該在一個正式的網(wǎng)站中使用！-webkit-text-fill-color:trasparent幫助你生成一個透明的背景。當(dāng)然其它瀏覽器都會忽略。

    我們使用:after偽類來在標(biāo)題下創(chuàng)建了一個淡出的直線效果。我們對直線兩端使用2px的高度漸變并且淡出背景到0。

    接下來我們使的輸入更好漂亮。

     
 
 
 
      
  
  
  
  
    1. /**** advanced input styling ****/
      2. 
  
  
  
  
    2. /* placeholder */
      3. 
  
  
  
  
    3. ::-webkit-input-placeholder  { 
      4. 
  
  
  
  
    4.     color: rgb(190, 188, 188); 
      5. 
  
  
  
  
    5.     font-style: italic; 
      6. 
  
  
  
  
    6. } 
      7. 
  
  
  
  
    7. input:-moz-placeholder, 
      8. 
  
  
  
  
    8. textarea:-moz-placeholder{ 
      9. 
  
  
  
  
    9.     color: rgb(190, 188, 188); 
      10. 
  
  
  
  
    10.     font-style: italic; 
      11. 
  
  
  
  
    11. } 
      12. 
  
  
  
  
    12. input { 
      13. 
  
  
  
  
    13.   outline: none; 
      14. 
  
  
  
  
    14. }
      15.

    首先我們定義了input樣式并且刪除了outline。注意outline幫助用戶知道目前聚焦到那個輸入項，如果你刪除你應(yīng)該提供:active和:focus。

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

    這里我們使用:not pseudo class，來定義所有input樣式，除了checkbox。我提供了一個:focus和:active狀態(tài)，因為我們要刪除outline。

    接 下來我們介紹icon字體部分。因為對于input來說我們沒有辦法添加:before和:class偽類，所以我們需要作弊一下：我們添加icon到 label，然后添加到input中。這里我們使用fontomas library的圖標(biāo)。 記得data-icon屬性吧？在這里我們使用data-icon='u'代表用戶，'e'代表電子郵件，'p'代表密碼。一旦選擇這些字母，我們下載字 體，并且使用fontsquirrel font generator來將他們生成@font-face兼容格式。

     
 
 
 
      
  
  
  
  
    1. @font-face { 
      2. 
  
  
  
  
    2.     font-family: 'FontomasCustomRegular'; 
      3. 
  
  
  
  
    3.     src: url('fonts/fontomas-webfont.eot'); 
      4. 
  
  
  
  
    4.     src: url('fonts/fontomas-webfont.eot?#iefix') format('embedded-opentype'), 
      5. 
  
  
  
  
    5.          url('fonts/fontomas-webfont.woff') format('woff'), 
      6. 
  
  
  
  
    6.          url('fonts/fontomas-webfont.ttf') format('truetype'), 
      7. 
  
  
  
  
    7.          url('fonts/fontomas-webfont.svg#FontomasCustomRegular') format('svg'); 
      8. 
  
  
  
  
    8.     font-weight: normal; 
      9. 
  
  
  
  
    9.     font-style: normal; 
      10. 
  
  
  
  
    10. } 
      11. 
  
  
  
  
    11.   
      12. 
  
  
  
  
    12. /** the magic icon trick ! **/
      13. 
  
  
  
  
    13. [data-icon]:after { 
      14. 
  
  
  
  
    14.     content: attr(data-icon); 
      15. 
  
  
  
  
    15.     font-family: 'FontomasCustomRegular'; 
      16. 
  
  
  
  
    16.     color: rgb(106, 159, 171); 
      17. 
  
  
  
  
    17.     position: absolute; 
      18. 
  
  
  
  
    18.     left: 10px; 
      19. 
  
  
  
  
    19.     top: 35px; 
      20. 
  
  
  
  
    20.     width: 30px; 
      21. 
  
  
  
  
    21. }
      22.

    沒錯，你不需要為每一個圖標(biāo)設(shè)置class。我們使用content:attr(data-icon)來取得字母，因此我們只需要申明字體，選擇顏色并且定義位置。

    接下來我們定義遞交按鈕：

     
 
 
 
      
  
  
  
  
    1. /*styling both submit buttons */
      2. 
  
  
  
  
    2. #wrapper p.button input{ 
      3. 
  
  
  
  
    3.     width: 30%; 
      4. 
  
  
  
  
    4.     cursor: pointer; 
      5. 
  
  
  
  
    5.     background: rgb(61, 157, 179); 
      6. 
  
  
  
  
    6.     padding: 8px 5px; 
      7. 
  
  
  
  
    7.     font-family: 'BebasNeueRegular','Arial Narrow',Arial,sans-serif; 
      8. 
  
  
  
  
    8.     color: #fff; 
      9. 
  
  
  
  
    9.     font-size: 24px; 
      10. 
  
  
  
  
    10.     border: 1px solid rgb(28, 108, 122); 
      11. 
  
  
  
  
    11.     margin-bottom: 10px; 
      12. 
  
  
  
  
    12.     text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); 
      13. 
  
  
  
  
    13.     border-radius: 3px; 
      14. 
  
  
  
  
    14.     box-shadow: 
      15. 
  
  
  
  
    15.         0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset, 
      16. 
  
  
  
  
    16.         0px 0px 0px 3px rgb(254, 254, 254), 
      17. 
  
  
  
  
    17.         0px 5px 3px 3px rgb(210, 210, 210); 
      18. 
  
  
  
  
    18.     transition: all 0.2s linear; 
      19. 
  
  
  
  
    19. } 
      20. 
  
  
  
  
    20. #wrapper p.button input:hover{ 
      21. 
  
  
  
  
    21.     background: rgb(74, 179, 198); 
      22. 
  
  
  
  
    22. } 
      23. 
  
  
  
  
    23. #wrapper p.button input:active, 
      24. 
  
  
  
  
    24. #wrapper p.button input:focus{ 
      25. 
  
  
  
  
    25.     background: rgb(40, 137, 154); 
      26. 
  
  
  
  
    26.     position: relative; 
      27. 
  
  
  
  
    27.     top: 1px; 
      28. 
  
  
  
  
    28.     border: 1px solid rgb(12, 76, 87); 
      29. 
  
  
  
  
    29.     box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; 
      30. 
  
  
  
  
    30. } 
      31. 
  
  
  
  
    31. p.login.button, 
      32. 
  
  
  
  
    32. p.signin.button{ 
      33. 
  
  
  
  
    33.     text-align: right; 
      34. 
  
  
  
  
    34.     margin: 5px 0; 
      35. 
  
  
  
  
    35. }
      36.

    這里我們主要使用box-shadow來創(chuàng)建多余的border。你可以使用一個邊框，但是也可以創(chuàng)建更多。我們使用length數(shù)值來創(chuàng)建一個假的白色邊框，3px寬，沒有模糊。

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


    本文標(biāo)題：超酷HTML5和CSS3實現(xiàn)登錄及注冊功能表單
    文章出自：    http://www.dlmjj.cn/article/dhpchso.html