Cross-Browser configurable CSS-SVG filters.
CSS JavaScript HTML Ruby
Latest commit 6820ced Sep 24, 2016 @pascalduez committed on GitHub Update README.md
Permalink
Failed to load latest commit information.
dist
docs
lib
stylesheets
test
.editorconfig
.gitignore
.npmignore
CHANGELOG.md
CONTRIBUTING.md
Gemfile
Gruntfile.js
LICENSE
README.md
bower.json
package.json
sache.json

README.md

SassyFilters

Cross-Browser configurable CSS-SVG filters.

Online preview (test folder).
Online Documentation (generated with SassDoc).

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 git@github.com:pascalduez/SassyFilters.git

npm

npm install sassyfilters --save

Bower

bower 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']
  }
}

Caveats

  • CSS and SVG filters can have significant impact on performances. Use them wisely.

Roadmap

  • More IE support trough behaviors

Similar projects

There are different ways of dealing with cross browser filters that are worth checking out:

Development

You need

How to

  1. Fork this repository
  2. Run npm install
  3. Make your changes + write tests
  4. grunt test

Authors

Pascal Duez

Licence

SassyFilters is available under the MIT license.