April 2013
Intermediate to advanced
274 pages
5h 39m
English
Compass provides a mixin to produce a vendor-prefixed stack of properties for CSS Filters. The syntax follows the W3C specification described here at http://www.w3.org/TR/filter-effects/.
Let's use the drop-shadow filter to solve our prior issue. We'll remove the existing box-shadow mixin and instead apply a CSS drop-shadow filter with the Compass mixin:
@include filter(drop-shadow(#ccc 1px 1px 0px));
And here is the effect in the browser:

Compass will let you apply all CSS filters in this manner, essentially following the W3C syntax for the relevant filter.
Be aware that filters are experimental at this stage so you may find, as in this ...
Read now
Unlock full access