Skip to content

Instantly share code, notes, and snippets.

@mskasal
Created November 24, 2014 16:25
Show Gist options
  • Save mskasal/fbc73b6ce1d6df790bc6 to your computer and use it in GitHub Desktop.
Save mskasal/fbc73b6ce1d6df790bc6 to your computer and use it in GitHub Desktop.
Material design layers, raised/raised-low/raised-high CSS
.raised {
box-shadow: 0 3px 10px rgba(0,0,0,.23),0 3px 10px rgba(0,0,0,.16);
-webkit-transition: box-shadow .28s cubic-bezier(0.4,0,.2,1);
transition: box-shadow .28s cubic-bezier(0.4,0,.2,1);
}
.raised-low{
box-shadow: 0 3px 10px rgba(0,0,0,.23),0 2px 10px rgba(0,0,0,.16);
-webkit-transition: box-shadow .28s cubic-bezier(0.4,0,.2,1);
transition: box-shadow .28s cubic-bezier(0.4,0,.2,1);
}
.raised-high {
box-shadow: 0 3px 10px rgba(0,0,0,.23),3px 13px 10px rgba(0,0,0,.16);
-webkit-transition: box-shadow .28s cubic-bezier(0.4,0,.2,1);
transition: box-shadow .28s cubic-bezier(0.4,0,.2,1);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment