Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
lib
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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.

About

Cross-Browser configurable CSS-SVG filters.

Resources

License

Packages

No packages published