To get up and running with Shade, all you need to do is @include shade(text) or @include shade(box) and you will get the default arguments, the results are below. The next two variables are color and depth, use like this: @include shade(text, #d35400, 50);
I've heard these are all the rage at the moment. So I've added an optional variable, $long. Just pass $long: true to the mixin and you're all set to go, creating trendy, long casting shadows. e.g. @include shade(text, blue, $long: true); or @include shade(box, blue, $long: true);
Using Compass's built in Cos and Sin functions, Shade has the capabilities to choose the direction of the shadow by just using degrees. To change the default angle of 135deg, pass the variable $angle to the mixin e.g. @include shade(#2b3c4e, $angle: 156deg);
The final variable is $fade which fades out the shadow, instead of a clean cut. To use this pass $fade: true to the mixin. A full usage mixin would be like this @include shade(text, #d35400, 50, 156deg, true, true);