A blog for technology, SEO tips, website development and open source programming.

Material Design in Action

0 2,425

We’ve seen last year that many websites and app adopted, incorporated the visual language. Material Design was introduced by Google on the IO event 2014. This is going to be the year of Material Design. Just in case you haven’t jumped on the Material Design bandwagon or aren’t fully convinced of it’s merits as yet, we’ve collected a small collection of HTML and CSS examples from Codepen that will surely convince you.

Drawer Motion

A demonstration of how the app drawer is filled with motion in Android Lollipop. ByHimateja and Jovie Brett.

See the Pen Material Design Drawer – Dribbble Rebound (Webkit only) by Himateja (@Himateja) on CodePen.

Animated Tiles

A CSS-based prototype of Material Design’s animated tiles. By Sergey Kupletsky.
See the Pen Material Design (CSS-based) – Tiles by Sergey Kupletsky (@zavoloklom) on CodePen.

Morphing Icons

A collection of recreated ‘morphing’ icons in a Material Design style. By Alberto Bonvicin.

See the Pen Material design morphing icons 2 by Alberto Bonvicin (@albebonv) on CodePen.

Subtle Animation

A CSS-only recreation of Material Design’s flawless and subtle animations. By Michiel Bijl.
See the Pen CSS Animation Material Design by Michiel Bijl (@Michiel) on CodePen.

Immaculate Transitions

Immaculate examples of Material Design’s transitions. By Andrew Tunnecliffe.

See the Pen Material Design Example by Andrew Tunnecliffe (@atunnecliffe) on CodePen.

Preloader

A Javascript (jQuery plugin) recreation of the Material Design preloader. By Aaron Lumsden.

See the Pen Material Design Preloader by Michiel Bijl (@Michiel) on CodePen.

Scaling Interaction

A simple recreation of Material Design’s scaling interactions. By Dennis Gaebel.

See the Pen Expando: An Interaction Based on Google Material Design by Dennis Gaebel (@grayghostvisuals) on CodePen.

Form Inputs

Examples of the inputs on a Material Design form. By Sergey.

See the Pen Inputs from Google Material Design [WIP] by Sergey (@JohnTheCat) on CodePen.

Swipe Animation

A pure-CSS example of Material Design’s intuitive card swipe animation. By Michiel Bijl.

See the Pen Card Swipe Animation Material Design by Michiel Bijl (@Michiel) on CodePen.

Clean Navigation

A Material Design menu system that slides the page to reveal a clean and simple navigation. By Lewi Hussey.

See the Pen Material design navigation by Lewi Hussey (@Lewitje) on CodePen.

Hamburger Menu

A CSS (with a sprinkle of JS) hamburger menu that has been animated in a Material Design style. By Chris Wheatley.

See the Pen Material Design Hamburger by Chris Wheatley (@swirlycheetah) on CodePen.

Loading Spinner

A CSS and SVG recreation of Material Design’s loading spinners. By Fran Pérez.

See the Pen Material Design Spinner by Fran Pérez (@mrrocks) on CodePen.

Address Bar UI

A CSS mock-up of Chrome’s Material Design address bar (including meaningful transitions). By David Khourshid.

See the Pen Chrome for Android Address Bar UI by David Khourshid (@davidkpiano) on CodePen.

Slide Tabs

A touch enabled side scrolling tab system that mimics Android Lollipop’s stock app drawer. By Adam Crockett.

See the Pen Material Design slide tabs [Touch ready] by Adam Crockett (@acronamy) on CodePen.

Concluding

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.

Leave a Reply

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More