We touched on Material Design a few months ago (Material Design GUI kits, you should check them out!) just as Google’s innovative visual language began building up a head of steam. Since then, we’ve seen many, many sites and apps that have incorporated the visual language successfully. This is going to be the year of Material Design, and we love it
Just in case you haven’t jumped on the Material Design bandwagon or aren’t fully convinced of its merits as yet, we’ve collected a small collection of HTML and CSS examples from Codepen that will surely convince you. Here they are:
A demonstration of how the app drawer is filled with motion in Android Lollipop. By Himateja and Jovie Brett.
A CSS-based prototype of Material Design's animated tiles. By Sergey Kupletsky.
A collection of recreated 'morphing' icons in a Material Design style. By Alberto Bonvicin.
A CSS-only recreation of Material Design's flawless and subtle animations. By Michiel Bijl.
Immaculate examples of Material Design's transitions. By Andrew Tunnecliffe.
A simple recreation of Material Design's scaling interactions. By Dennis Gaebel.
Examples of the inputs on a Material Design form. By Sergey.
A pure-CSS example of Material Design's intuitive card swipe animation. By Michiel Bijl.
A Material Design menu system that slides the page to reveal a clean and simple navigation. By Lewi Hussey.
A CSS (with a sprinkle of JS) hamburger menu that has been animated in a Material Design style. By Chris Wheatley.
A CSS and SVG recreation of Material Design's loading spinners. By Fran Pérez.
Address Bar UI
A CSS mock-up of Chrome's Material Design address bar (including meaningful transitions). By David Khourshid.
A touch enabled side scrolling tab system that mimics Android Lollipop's stock app drawer. By Adam Crockett.
What are your thoughts on Material Design? Have you used it any of your projects? Also, if know of any other animated examples of Material Design, please do share them as well.
- The Beginner’s Guide to Google’s Material Design
- 8 Fantastic Onboarding Carousel HTML & CSS Snippets
- The Tiny Short Animation Trend in Web Design
- The Design Trend of Utilizing Monochrome Colors in Hero Areas
- Going Up: Vertical Lettering in Web Design
- Branding Heroes: Adding Your Identity into the Hero Area
- Using ‘Spotty’ Backgrounds in Web Design to Grab Attention
- Taking a Look at Brand-Related Splash Screens in Web Design