Material Design Box Shadow
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 fall in love with google material design, all elements are so eye cachy. Material design box-shadow is specially more fantastic.
In this article I will try to show you how you can implement google material design box-shadow within SASS mixin.
Material Design box shadow by SCSS mixin
Material design box shadow mixin source code
This mixin has 5 parameter 1 ~ 5 for different level shadow depth.
Let’s play with this mixin
Here a create 5 box same height and width(200px * 200px) and then put different shadow dept level to each box class by mboxshadow mixin.
OUTPUT:
Material Design box shadow hover
Let’s play material box shadow with in hover effect.
Here two box I created. In first box (.box-6) , for normal circumstances I put box-shadow depth level 1 and for hover effect I put shadow depth level 2.
And for the another box(.box-7) I putted shadow depth level 5 for normal situation and depth level 3 for hover effect.
Now you see, output will be,
OUTPUT:
Hope, my little effort may come in your help. Comment here whatever your feelings about this article.
