10 个有用的 Material Design 代码片段

材料设计热潮正在席卷网络世界。 每个月我都会发现使用框架或自定义 UI 工具包以 Material 风格运行的新网站。

但这并不是一件坏事，恰恰相反！ 这是一种通过使用 Google 认可为他们自己的首选设计语言的成熟趋势来简化您的设计过程的方法。

如果您对材料设计风格很感兴趣，那么这些代码片段适合您。 这些只是我最喜欢的 10 个，它们提供了多种设计和组件供您挑选。

响应表

这是一个具有独特转折的材料设计片段。 这个由 Sergey Kupletsky 创建的响应式表格实际上包含了其他指向材料设计片段的链接。 很酷！

这也是使用材料设计技术自然创建的，因此表格应该完全适合您自己的布局。 但移动设计中最困难的部分是制作在较小屏幕上工作的桌子。

我认为这种方法是处理它的最佳方法之一。 您的代码也保持干净，这使得无论您的表格大小如何，编码、清理和管理都非常容易。

卡片 UI 转换

开发人员 Ivan Villamil 用一些非常疯狂的动画构建了这个非常独特的卡片 UI 设计。

查看页面并尝试单击任何卡片。 您将获得独特的动画效果，其中卡片内容在容器上动画并出现在视图中。 这就像您希望在移动应用程序中找到的东西，但移植到网络上！

动画效果完美无瑕，它们显示了您今天可以在网络上做多少事情。 更不用说这个组合的网络/移动用户界面的材质风格是正确的。

紧凑型登录

在我作为设计师的这些年里，我见过一些非常酷的登录表单。 但这种疯狂的设计可能会因其互动功能和独特的风格而大受欢迎。

当您单击右上角的亮粉色图标时，您将获得一个显示在页面上方的注册字段。 它非常独特，它创建了一个真正可用的界面。

那么有什么问题呢？ 这确实使用了大量的 JavaScript，所以它不是最简洁的代码解决方案。 但仍然是具有紧凑功能的设计的一个很好的例子。

填充动画

Scott Kellum 开发了这种有趣的材料卡片布局，一旦页面加载就会自动填充。 这在一个网格中发展，您可以将每张卡片悬停在其中以查看实际的材料设计功能。

我不能说这在直接项目中有多大用处，或者你能从中得到多少。 但这是一个有趣的片段，展示了 Web 的离网设计，混合了一些材料风味和悬停动画。

材质 BS4 纽扣

在网上提供的许多 Bootstrap 模板中，您最好相信其中一些使用材料设计。 这支笔展示了您可以在 Bootstrap 4 中使用材料设计做的所有很酷的事情。

实际上，这只是一组重新设计为 Google 材料语言的按钮。 但这一切都在最新的 BS4 框架上运行，因此您可以将它们添加到任何 Bootstrap 支持的页面。

如果您对 Bootstrap 很认真，请查看最新版本以了解您的想法。 它可以很好地作为任何事物的基础，对于物质网站尤其如此。

材料设计选择菜单

下拉选择菜单是表单设计的主要内容。 他们让用户从有关州、国家、语言等相关主题的少数答案中进行选择。

这种材料设计选择将常见的 HTML 选择菜单提升到了一个全新的水平。

它不依赖于典型的文档样式来选择一个选项。 相反，它使用了一个无序列表，jQuery 处理动画和选择过程。 我不得不说，这东西钉在了物质风格上。

材质阴影

谷歌真的在他们的材料文档中推动了阴影的深度。 这就是您将在这支笔中看到的，其中的圆圈都有自己独特的阴影效果。

使用阴影，您可以为页面元素指定层次结构，以便一些出现在顶部，另一些出现在较低的位置。 它会在屏幕上产生一种空间错觉，这在触摸屏上特别有用。

一个非常酷的效果，当然你可以在自己的项目中复制一些东西。

天气卡用户界面

开发人员 Thomas Vallez 创建了这个在纯 HTML 和 CSS 上运行的很棒的天气卡。 它在页面加载时使用了简单的淡入效果，但这里真正的美是材料设计风格。

从颜色到字体，甚至天气图标，一切都依赖于自然材质样式。

您可以使用此模板并将其用于几乎任何类型的卡片布局。 这是非凡的，当然也是此列表中更直接的项目之一。

材料选项卡

这是一个有趣的项目，它建立在材料设计选项卡的概念之上。 Michael Richins 使用一些基本的 JavaScript 和一些 Google 设计指南的知识创建了这支笔。

这些标签的工作方式与您在其他类似设备（如 Android 智能手机或平板电脑）上所期望的一样。 更不用说这个东西是在普通的 JavaScript上运行的，所以你永远不需要担心 jQuery 或任何类似的东西。

如果您正在寻找网站上的标签，这是一个非常酷的效果。 只需确保您测试样式以查看它们是否与您的页面自然融合。

点击响应动画

开发人员 Emmanuel Pilande 构建了这种很酷的响应效果，作为复制 Google 材料微交互的简单方法。

单击材料卡上的任意位置以查看效果。 您可以将其应用于几乎任何东西，从按钮到页面容器或输入字段。

它确实依赖于一些 JavaScript，但添加到任何项目中也很简单。 因此，如果您想要那种au naturale材质的外观，这是一个很好的保存片段。