fx-filter v1.0.0

A complete set of CSS filters utility for web UI, (FX, aka Special Effect).

See FX-Filter Previewer.

Yogurt {FX}.filter started out as a small side-project of mine. As I was increasingly using CSS animations and filters, I thought it would come in handy to have them organized in a meaningful and accessible way so that they can be easily reused on different projects.

I have been using {FX}.filter for a while now and I hope some of you will find it useful as well. It is still very much a work in progress and hopefully it will evolve over the time.

Below are my special collection of css filter made by me over the years.

{filter}

(!!) this preset has completed

• 1977, aden, brannan, brooklyn, clarendon, earlybird, gingham, hudson, inkwell, kelvin, lark, lofi, maven, mayfair, moon, nashville, perpetua, reyes, rise, slumber, stinson, toaster, valencia, walden, willow, xpro2

(total) 26 modules, 26 effects

_manage

you can enable or disable the modules that you don't want to included in the build with comment out them to suite your need,

• to customize presets, look for file fx-filter.scss.
• to customize modules, look for file _modules.scss.

_introduction

(!!) there are so much to do to make the class name easy to use.

the class name is always start with a prefix fx:filter:, following with the effect name e.g. lofi.

_usage

let's take an example of {filter} preset pack that comes with {lofi} effect module, this add filter to the image,

<img class="fx:filter:lofi"
     src="...">

<figure class="fx:filter:lofi">
  <img src="...">
</figure>

see all effect modules in all presets.

_build

# install dependencies
$ npm install

# build for production
$ npm run build

MIT