Inspiring Material Design Examples with HTML & CSS

Advertisement

By -

Web design trends are changing with the advancement in design ideas and creativity. The best design trend we have noticed in year 2015 is material design introduced by Google. Material design project is started to to enhance the reality in designs. Something designed with material design ideas with give some awesome reality experience.

In this article we have collected some examples of Material design with HTML and CSS. These designs will give a touch of reality effect in using. So let’s have a look at these designs and be the next in designing best projects in Google Material Design.


Animated Tiles

A CSS-based prototype of Material Design’s animated tiles. By Sergey Kupletsky.

Animated Tiles

Demo/Source 

Immaculate Transitions

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

Immaculate Transitions

Demo/Source 

Material Design Input Boxes

Here is an example of Google material design input boxes with awesome effects.

Material Design Input Boxes

Demo/Source 

Swip Animations

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

 

Swip Animations

Demo/Source 

Drawer Motion

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

Drawer Motion

Demo/Source 

Subtle Animation

A CSS-only recreation of Material Design’s flawless and subtle animations. By Michiel Bijl.

Subtle Animation

Demo/Source 

Slide Tabs

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

Slide Tabs

Demo/Source 

Form Inputs

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

Form Inputs

Demo/Source 

 Google Polymer Checkbox Using CSS3

Google Polymer Checkbox Using CSS3

Demo/Source 

Morphing Icons

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

Morphing Icons

Demo/Source 

Preloader

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

Preloader

Demo/Source 

Scaling Interaction

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

Scaling Interaction

Demo/Source 

Address Bar UI

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

Address Bar UI

Demo/Source 

Words, I’ll say: Just see these examples with much attention and get some new ideas about material design. Have fun!

We focus on providing best design and development resources to energies your experience.

Comments are closed.