18+ CSS Filters Implemented In Pure JavaScript – Philter

Category: Javascript , Recommended | September 14, 2018
Author: Specro
Views Total: 1,450
Official Page: Go to website
Last Update: September 14, 2018
License: MIT

Preview:

18+ CSS Filters Implemented In Pure JavaScript – Philter

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

Leave a Reply