CSS Filters
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.
Tip
Be aware that filters are experimental at this stage so you may find, as in this ...
Get Sass and Compass for Designers now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
