Freebie: Google Material Design Shadow Helper
A LESS CSS mixin for creating box-shadows according to Google’s Material Design style guide
One of the things that Google revealed at the Google I/O 2014 was the new visual language for all their apps, services and Android OS — called material design. Together with the keynote they released a living style guide.
I am impressed by the attention Google pays to all the details in their guide. I was especially impressed by the section on shadows which are used to define different layers and thus create depth.
I created a neat little LESS CSS mixin that allows you to easily set box-shadows for modals and dialogs according to the spec, and I would like to share it with you.
Interestingly one cannot directly copy the illustrator parameters into CSS/LESS code since they do not translate 1:1. I had to double the blur parameter to make it look identical.
Pro tip: Change the BoxShadowHelper level and translate along the y-axis on interactions (e.g. :hover) for that extra “wow!” (see Gist around line 13 for an example).
Kudos to Google for their new visual language and excellent style guide.