Skip to content

Instantly share code, notes, and snippets.

@gefangenimnetz
Last active December 17, 2022 17:21
Show Gist options
  • Save gefangenimnetz/3ef3e18364edf105c5af to your computer and use it in GitHub Desktop.
Save gefangenimnetz/3ef3e18364edf105c5af to your computer and use it in GitHub Desktop.
Less css box-shadow helper for cards & modals according to Googles Material Design spec.
/**
* A mixin which helps you to add depth to elements according to the Google Material Design spec:
* http://www.google.com/design/spec/layout/layout-principles.html#layout-principles-dimensionality
*
* Please note that the values given in the specification cannot be used as is. To create the same visual experience
* the blur parameter has to be doubled.
*
* Author: Florian Kutschera (@gefangenimnetz), Conceptboard GmbH (@conceptboardapp)
*
* Example usage:
*
* .card {
* width: 95px;
* height: 95px;
* background: #f4f4f4;
* -webkit-transition: all 250ms;
* -moz-transition: all 250ms;
* transition: all 250ms;
* .BoxShadowHelper(1);
* &:hover {
* .BoxShadowHelper(3);
* -webkit-transform: translateY(-5px);
* -moz-transform: translateY(-5px);
* transform: translateY(-5px);
* }
* }
*
*/
.BoxShadowHelper(@level: 1){
& when (@level = 1) {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
& when (@level = 2) {
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
& when (@level = 3) {
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
& when (@level = 4) {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
& when (@level = 5) {
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
}
@rickydazla
Copy link

@gefangenimnetz can you elaborate on why you chose the values you did? The result looks nice but I am looking esp. at the second values for v-shadow and blur.

  1. 0 1px 3px, 0 1px 2px
  2. 0 3px 6px, 0 3px 6px
  3. 0 10px 20px, 0 6px 6px
  4. 0 14px 28px, 0 10px 10px
  5. 0 19px 38px, 0 15px 12px

The pattern in the first set of values is pretty clear but the second set isn't. Just curious..

@gdekadt
Copy link

gdekadt commented Apr 6, 2017

@rickydazla - it's just an extra shadow to add quality to the effect.

@FelisPhasma
Copy link

FelisPhasma commented Nov 4, 2017

I wrote a sass implementation for whoever needs it, as the link mentioned above is dead.

@mixin shadow($depth){
	@if $depth == 1 {
		box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

	} @else if $depth == 2 {
		box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);

	} @else if $depth == 3 {
		box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

	} @else if $depth == 4 {
		box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);

	} @else if $depth == 5 {
		box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);

	}
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment