Material design with code - Kodhus

Material design with code

“We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science. This is material design. This spec is a living document that will be updated as we continue to develop the tenets and specifics of material design.” – Material design website!

In essence Material design is a set of principles on how to develop efficient and beautiful(subjective) interfaces, components and websites and how to make them user friendly!

Material Motion

One of the interesting topics in material design is “Material motion”. Take a look at it in the following link:
Material motion webpage
It talks about how to create animations in your website and interfaces that make sense. Kodhus has put effort on recreating those animations in html and css code and following is a list of some of them with the reference to the page in the material design website that they have been presented!

Radial transformation

“Radial transformations are symmetrical, circular visualizations that originate from a user’s point of touch. They are commonly used on circular surfaces that morph into other shapes.”
Material design link: Radial transformation

Rectangular transformation

“When material changes shape and size, its width and height change asynchronously along a motion curve. These changes are choreographed with nearby surfaces inside or around the changing element.”
Asymmetric transformations involve the width and height changes at different rates. They work best when multiple elements or position changes are involved.”
Material design link: Rectangular transformation


“Maintain a clear focal point during transitions by carefully selecting the number and type of elements shared across the transitions.

All content elements are shared

While a surface is expanding, a significant number of elements should remain visible during the transition.”

Material design link: Rectangular transformation

Rectangular transformation

“When an element expands asynchronously, the items it contains (such as text or images) change size at a constant aspect ratio to prevent unnatural stretching. For more information on how to transition content within a surface”
Material design link: Rectangular transformation

Share if you liked it: Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn