SassyFilters
Cross-Browser configurable CSS-SVG filters.
Online preview (test folder).
API
Filters
Mixins signatures try to follow the specification closely.
blur($radius)
brightness($value)
contrast($value)
drop-shadow($offset-x, $offset-y, $blur-radius, $color [, $spread-radius])
grayscale($value)
hue-rotate($angle)
invert($value)
opacity($value)
saturate($value)
sepia($value)
Example:
Combined filters
filters($filters)
Example:
SVG filter helper
svg-filter($svgStr, $fragment [, $encoding])
Example:
Configuration
// Default settings. ;
Override default values in a new $filters-settings
map.
Browser support
Work in progress...
CSS Filter Effects
Chrome 18.0+ Safari 6.0+ Opera 15.0+
SVG effects for HTML
Firefox 3.5+
Microsoft Extensions to CSS
filter IE 6, 7, 8
-ms-filter IE 8, 9
Requirements
- Sass ~> 3.3.0
Install
Git
git clone git@github.com:pascalduez/SassyFilters.git
npm
npm install sassyfilters --save
Usage
Provided that [path] = path to SassyFilters
Sass
Example usage with vanilla;
bundle exec sass --watch --load-path [path]/dist --require [path]/lib/helpers.rb input:output
grunt-contrib-sass
Example usage withsass: options: bundleExec: true // Optional usage of Bundler, but recommended. require: '[path]/lib/helpers.rb' loadPath: '[path]/dist/_SassyFilters.scss'
Roadmap
- More IE support trough behaviors
Development
You need
How to
- Fork this repository
- Run
npm install
- Make your changes + write tests
grunt test
- Commit + Pull request
Authors
Licence
SassyFilters is available under the MIT license.