Fork me on GitHub

matic

The Photo Filter SCSS Mixin Library

<
Goose
>

Preset Filters

Simple Usage

Preset Filters now ues Sass' @extend feature with %placeholders

.html

<div> <img src="img/example.jpg"/> </div>

.scss

@import "compass"; @import "sassmatic.scss"; div { @extend %filter-sanfran; }

Custom Filters

Below is the setup up for the "custom" filter in the demo at the top

.scss

@import "compass"; @import "sassmatic.scss"; div { @include filter-custom(sepia(100%)); // REQUIRED but doesn't have to have a value @include filter-color(#ffb400, 0.5);// Filter color and opacity @include filter-vignette(white, 70%, 90%, 3rem); // Color, start, stop and inset boxshadow }