Skip to content

Instantly share code, notes, and snippets.

@paulmelnikow

paulmelnikow/shadows.scss

Last active August 22, 2022 15:35
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save paulmelnikow/7fcfbe4f68e5df7fe326 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save paulmelnikow/7fcfbe4f68e5df7fe326 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. paulmelnikow renamed this gist Nov 18, 2014. 1 changed file with 0 additions and 0 deletions.
    0 gistfile1.scss → shadows.scss
    View file
    File renamed without changes.
  2. paulmelnikow revised this gist Nov 18, 2014. No changes.
  3. paulmelnikow created this gist Nov 18, 2014.
    47 changes: 47 additions & 0 deletions gistfile1.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,47 @@
    /**
    * 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.
    *
    * Adapted from a LESS version at https://medium.com/@Florian/freebie-google-material-design-shadow-helper-2a0501295a2d
    *
    * Original 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;
    * @include box_shadow(1);
    * &:hover {
    * @include box_shadow(3);
    * -webkit-transform: translateY(-5px);
    * -moz-transform: translateY(-5px);
    * transform: translateY(-5px);
    * }
    * }
    *
    */

    @mixin box_shadow ($level) {

    @if $level == 1 {
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    } @else if $level == 2 {
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    } @else if $level == 3 {
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    } @else if $level == 4 {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    } @else if $level == 5 {
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
    }

    }