sassyfilters
v0.1.4
Published
Cross-Browser configurable CSS-SVG filters.
Downloads
32
Readme
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:
.blurred {
@include blur(5px);
}
Combined filters
filters($filters)
Example:
.combined {
@include filters((
brightness: 3,
invert: 1,
blur: 5px
));
}
SVG filter helper
svg-filter($svgStr, $fragment [, $encoding])
Example:
.custom {
$svgStr: '<svg xmlns="http://www.w3.org/2000/svg">
<filter id="custom">
<feGaussianBlur in="SourceGraphic" stdDeviation="1"/>
<feComponentTransfer>
<feFuncA tableValues="0 .7" type="table"></feFuncA>
</feComponentTransfer>
</filter>
</svg>';
@include svg-filter($svgStr, "custom");
}
Configuration
// Default settings.
$filters-defaults: (
data-type: "raw", // Encoding of the SVG filters as data URI: raw | escaped | base64
ie-support: true // Whether to add IE proprietary filters or not
);
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 [email protected]:pascalduez/SassyFilters.git
npm
npm install sassyfilters --save
Usage
Provided that [path] = path to SassyFilters
Example usage with vanilla Sass
@import 'SassyFilters';
bundle exec sass --watch --load-path [path]/dist --require [path]/lib/helpers.rb input:output
Example usage with grunt-contrib-sass
sass: {
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.