7jqmdq
Last Updated: February 25, 2016
·
933
· paprikkastudio
Photo

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);
}
Say Thanks
Respond
Awesome Job

E7334122 1780 11e8 9aaf caa9487f1cb0
DevOps Engineer
·
Negotiable, Sydney or Canberra pref
·
Full Time