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);
}
Written by Rafal Pastuszak
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Css
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#