18+ CSS Filters Implemented In Pure JavaScript – Philter

Preview:

Description:

Philter is a pure JavaScript plugin which enables you to apply 18+ CSS filters to any images using HTML data attributes.

How to use it:

Install the Philter JavaScript library in your project.

npm install philter

<script src="/path/to/philter.min.js"></script>

Initialize the plugin and we’re ready to go.

new Philter({
    // options here
});

Apply custom CSS filters to your image as this.

<div
  data-philter-hue-rotate="330"
  data-philter-contrast="125"
  data-philter-saturate="125"
  data-philter-brightness="60"
  data-philter-drop-shadow="0 0 5 30">
</div>

CSS filters available.

• blur
• grayscale
• hue-rotate
• saturate
• sepia
• contrast
• invert
• opacity
• brightness
• drop-shadow: Requires 4 values. The 4th value instead of color is opacity 0 to 100%.
• svg: Requires 1 value – filter ID.
• color: Requires 2 values. Color and opacity.
• vintage: Requires an integer from 1 to 6.
• duotone – Requires 2 values. 2 colors in hex.
• custom – Requires a string – custom filter name.
• anaglyph – Experimental – Requires an anaglyph offset value.

Possible options with default values.

new Philter({
    // hover transition time
    transitionTime: 0.5, 
    // philter directory
    url: './js', 
    // 'philter' in data attributes
    tag: true
    
});

Changelog:

v1.5.0 (09/14/2018)

• Added more filters