Material Design 实用案例演示

Material Design 是 Google I/O 2014 最新推出的全平台设计指南。很多效果看起来很炫,有没有办法使用HTML5来做。下面分享一些靠谱的演示代码,代码都是来自codepen上面的代码:详细可以参考 Material Design 标签。

Material Design调色板

See the Pen Fullscreen Flexbox Color Picker by Le Roux Bodenstein (@lerouxb) on CodePen.

消息类型

See the Pen Polymer message styles by Carolina Valdez (@carolinavaldez) on CodePen.

Android L 涟漪效果

See the Pen Android L ripple effect without Polymer by Adam Gospodarczyk (@fronterweb) on CodePen.

See the Pen Paper button (without canvas) by Boris Kaiser (@boriskaiser) on CodePen.

Hierarchical Timing

See the Pen Google Material Design Hierarchical Timing by Prajwal Manjunath (@prajwalkman) on CodePen.

输入框

See the Pen Google Material Design Input Boxes by Chris Sevilleja (@sevilayha) on CodePen.

Animated Tabs

See the Pen Material Design App – Animated Tabs by keremciu (@keremciu) on CodePen.

Paper Elements

A sampler showcasing Polymer elements based on material design,查看在线演示(可能需要翻墙)


关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流