网站建设时使用HTML5和CSS构建的10个开源登录页面

设计一个快速登录页面可能看起来不多。毕竟它只是一个表单和一个提交按钮。

然而，如果您深入了解各种登录表单页面，您会发现大量的设计想法。如果您有一些代码片段可以与您一起工作，您可以快速构建登录表单页面，而无需从头编码。

此列表提供了10个开放源代码登录页面，您可以对任何Web项目使用和重新格式化。

1.登录页面UI

开发人员Khaled Mneimneh使用一些基本的CSS3属性构建了这个时尚的登录界面。

四舍五入的输入字段非常易于复制，并且阴影效果也不需要多行代码。这整个事情可以很容易地在任何网站工作一些时间编辑样式和颜色。

但是突出的部分是提交按钮中的自定义渐变。这是一些关注细节。

2.渐变形式

Tyler Fry开发了一个带有黑暗风格登录表单的有趣渐变页面。

在这里我最喜欢的部分是较暗的背景，以及它如何在窗体中使用较亮的文本时很好地工作。

通常情况下，设计师会为深色页面粘贴深灰色背景，但使用渐变中的较暗色调，该效果看起来非常棒。

当你关注时，即使输入字段也有一些风格。仔细观察，你会看到阴影突出显示在焦点上。

3.纯HTML5

纸堆登录表单对于设计人员来说是一种非常常见的技术。由于平面设计的普及，我们现在看不到这种情况。

然而，我仍然是这种风格的粉丝，这就是为什么Vladimir Banduristov的HTML5表格值得称赞。它完全在HTML和CSS中使用一些非常干净的表单输入设计。

但它是整个页面突出的，这是一个可以添加到几乎任何网站的设计。

这甚至可以作为一个自定义WordPress登录页面的模板，如果你想走得那么远。

4.显示/隐藏密码字段

该代码片段中的基本黑色设计超级干净且易于使用。但这甚至不是焦点。

在您完成表单工作时，您会注意到密码字段有一个显示/隐藏按钮。通常这在移动应用中使用，因为在那里输入密码比较困难。

但是，您可以将此功能添加到所有登录字段，以便让用户放心。它可以帮助人们避免错误登录，除非有人站在屏幕后面，否则这不是一个安全问题。

5.清理登录表单

这是一个超级干净的蓝色登录页面，使用一些明亮的渐变效果。

输入字段实际上具有轻微的外部发光，边框清晰，文字风格较暗。整个事情非常专业，我可以看到这个登录表单正用于从创业公司到企业网站的所有事情。

总的来说，我是这个设计的忠实粉丝，出色的风格登录抓住了任何人的注意力。

6. Apple Dev登录

开发人员Christophe Molina创建了Apple App开发板专用的Apple式登录域。

这不是大多数Apple用户会在日常基础上认可甚至使用的东西。

但它有一个非常疯狂的设计风格，具有skeuomorphism和精美风格的标题功能区。

更不用说整个表单运行在纯粹的CSS上，这本身就是一个真正的成就。

7.动画形式

在您的UI设计中添加一些动画总是很有趣。这就是这种形式提供的简短的jQuery动画形式动画。

即使演示没有多大作用，也很容易将其转换为工作表单字段。不过，如果这更像你的风格，你也可以直接在jQuery中处理用户输入。

总的来说，这是一个非常简单的动画设计。但是应该很容易复制一段时间来编辑代码。

8.黑暗签名

黑暗的UI设计并不是网络上的标准。但是，如果做得对，我个人觉得暗色更诱人。

看看Andreas Storm创建的这个黑暗的登录表单。它使用明亮的柠檬绿颜色作为登录按钮和自定义单选按钮。

这也许是整个列表中最美观的形式之一，没有太多盲目的功能。

我强烈建议对任何黑暗网站进行测试。它可以很好地用作自定义登录页面，甚至可以嵌入到您的网站上。

9.登录w / Register Modal

您看到大量的登录+注册模式窗口时下全部由JavaScript提供支持。而这一次由Andy陈仅仅是一个不错的设计与出色的用户体验混合的又一个例子。

页面背景本身很干净，并且表单域足够大，可以快速吸引注意力。但是，如果您点击右侧的小蓝边栏，您会看到一个注册窗口可以看到。

这出现在登录表单的顶部，所以它就像典型的模式窗口一样工作。很酷的效果！

它需要一点jQuery，但总共可以在25行JS上运行。考虑到这种形式的令人难以置信的可用性，这令人印象深刻

10.极简主义登录

超级轻便和超级基本是描述Marcello Africano开发的这种随和形式的最佳方式。

这是一个真正的基本页面，表单本身也极简主义，可以混合到任何布局中。笔只使用HTML和CSS，所以如果你想避免华丽的效果，你可以得到这个工作sans-JavaScript。