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

在线演示 本地下载

山东网站制作公司哪家好，找成都创新互联！从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设等网站项目制作，到程序开发，运营维护。成都创新互联成立于2013年到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选成都创新互联。

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

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

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

HTML

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

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

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

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

    CSS

    为了使得代码更加清晰，在教程里我们忽略了浏览器提供商指定的前缀， 当然你可以在对应代码中找到相关的设定。当然我们使用了很多不错的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)来创建2个阴影：一个inset用来创建内部蓝色，还有一个外部阴影。这里我们稍微解释一下z-index。

    在下面代码中，我们定义了标题的样式，使用了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创建条纹式的背景，我们将这个特效添加到H1标题。 因为目前只能在webkit浏览器上生效，我们将使用webkit前缀。只使用-webkit-prefix是一个糟糕的习惯，这里只是为了演示，你不应 该在一个正式的网站中使用！-webkit-text-fill-color:trasparent帮助你生成一个透明的背景。当然其它浏览器都会忽略。

    我们使用:after伪类来在标题下创建了一个淡出的直线效果。我们对直线两端使用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帮助用户知道目前聚焦到那个输入项，如果你删除你应该提供: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状态，因为我们要删除outline。

    接 下来我们介绍icon字体部分。因为对于input来说我们没有办法添加:before和:class伪类，所以我们需要作弊一下：我们添加icon到 label，然后添加到input中。这里我们使用fontomas library的图标。 记得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.

    没错，你不需要为每一个图标设置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来创建多余的border。你可以使用一个边框，但是也可以创建更多。我们使用length数值来创建一个假的白色边框，3px宽，没有模糊。

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

    分享名称：超酷HTML5和CSS3实现登录及注册功能表单
    地址分享：http://www.stwzsj.com/qtweb/news13/16713.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    品牌网站制作知识

    各行业网站

    网络推广公司　　 　成都企业网站建设公司　　 　成都网站建设　　 　全网整合营销推广　　 　内江托管服务器　　 　响应式网站建设方案　　 　响应式网站设计　　 　绵阳梓潼做网站　　 　遂宁海缘科技　　 　手机网站建设　　 　云虚拟主机　　 　成都画册设计　　 　成都网站建设　　 　宜宾冠赛网站　　 　app制作　　 　广汉做网站　　 　长城雪茄　　 　网站推广　　 　品牌网站建设公司　　 　成都雪糕加盟