网站建设时使用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。

友情提示:点赞熊源码网http://www.dianzanxiong.com点赞熊源码网 » 网站建设时使用HTML5和CSS构建的10个开源登录页面
分享到:
赞(0)
广告位820*80