1. Material Design Hamburger
Android’s Material Design hamburger animation built in CSS (with a sprinkle of JS).
2. Circle Hover Effect
Creates a Material Design style hover effect. The circle size is based on a percentage of it’s parent so it’s, for the most part, responsive to font size, element size, and other changes.
3. Material Design (CSS-based) – Tiles
4. Material design morphing icons
5. CSS Animation Material Design
6. Material Design – Typography
You can read more about Material Design fonts here
7. [SCSS] Configurable animated Material Design Menu Button
A configurable Material Design menu button with SCSS.
See the Pen [SCSS] Configurable animated Material Design Menu Button by Eduard Mayer (@codewunder) on CodePen.
8. Material Design Login Concept
A quick concept using material design style for a login screen. The class “ripple” sets the ripple effect and the property “data-ripple-color” changes the default white to a different ripple color.
9. Material Design Preloader
A CSS only solution that recreates the Material Design preloader; or, who needs jQuery anyway?You should set aria-busy to false when your stuff is loaded.
Primarily tested in Safari 8 with VoiceOver on OS X 10.10 Yosemite.
Also tested in these browsers:
Firefox 33 on OS X 10.10 Yosemite
Firefox 16 on OS X 10.10 Yosemite
Chrome 38 on OS X 10.10 Yosemite
Internet Explorer 11 on Windows 7
Internet Explorer 10 on Windows 7
Usable in these browsers:
Anything that support ARIA attributes, well, for screen reader users anyway.
You could load a fallback animated gif.
Broken in these browsers
Anything that doesn’t support keyframes
10. Authentic Material Design Shadows without Web Components
Many web designers are trying to make the Material Design shadows. They all tend to be slightly wrong and at close inspection look nothing like Google’s original. Ben Strahan found that Polymer had the best CSS implementation of the shadows but they were placed there by Web Component’s and the Shadow DOM which does not help about 99% of us (yet!). The shadows in this pen use pseudo elements to achieve the exact same quality as the Google spec. Enjoy!
See the Pen Authentic Material Design Shadows without Web Components by Ben Strahan (@benstr) on CodePen.
11. Google Material Design Buttons
A pen of buttons with Google’s New Material Design
12. Material Design Blog
Just a simple blog featuring the material design style.
13. Material Design Ink Effect
This replicates the ink effects described in Google’s material design spec.
14. Loader – Material design
Inspired by Google Design and by the #Polymer project.
15. Material Design Shadows CSS
Adaptation of Google’s material design shadows to represent depth in Stylus
16. Material Design Drop Animation
A similar UI convention is found within Google’s Material Design language. Developer Jesse Couch wanted to riff on that a bit. This animation doesn’t use canvas.
17. Material Design Menu
Material design inspired ‘growing’ menu.
18. CSS material design switch
19. Material Design Chat
A replication of Googles Messenger app with some basic functionality. Using Jade, SCSS, and ES6 via Tracuer and Animate.css for animations.
20. Portfolio Website Header
21. Material Design Player
Used Font Awesome for the icons.
Semi-functional: volume works, pause and play works, track works.
22. Material Design Portfolio
23. Material Design Upload Wireframe
24. Google material style checkbox (css only)
Checkboxes based on material design implementation of the polymer checkboxes. They don’t fully replicate, but are just an exercise to imitate checkboxes with css only. These only work in Chrome.
25. Fancy Navigation
Based on animations and UI from the wonderful world of Material Design.