Last Updated: February 25, 2016
·
1.21K
· paprikkastudio

CSS pseudo 3d / embossed element

What makes this tiny snippet cool is the fact that it's not a mixin but a SASS script function and can be used with text and html elements.

Hope it helps!

// usage text-shadow / box-shadow : shadow-3d($color, $length);
// adds pseudo-3d vertical shadow

@function shadow-3d($col, $h){
    $str : "";
    $shadow-col : darken($col, 5%);
        @for $i from 1 through $h{
            $str : "#{$str} 0 #{$i}px 0 #{$shadow-col},";  
        } 

            $str : "#{$str} 0 #{$h}px 10px rgba(0,0,0,.6), 0 #{$h}px 4px rgba(0,0,0,.4)"  ;

        @return unquote($str);
}