jQuery Plugin For Applying CSS Filters To Elements - Philter
| File Size: | 302 KB |
|---|---|
| Views Total: | 725 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Philter is a lightweight jQuery plugin which makes it easy to apply numerous visual effects (CSS filters or custom SVG filters) to elements using only CSS classes. Learn more about CSS filters here.
CSS filters supported:
- blur
- grayscale
- hue-rotate
- saturate
- sepia
- contrast
- invert
- opacity
- brightness
- drop-shadow
- svg
- color
Basic usage:
1. Add the latest version of jQuery library and the jQuery Philter plugin to the webpage.
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script> <script src="js/philter.min.js"></script>
2. Initialize the plugin and we're ready to go.
$.philter();
3. Apply a CSS filter with an value to your element. This will apply a Gaussian blur effect (5px standard deviation) to the DIV element.
<div class="philter blur_5"></div>
4. The plugin also supports applying multiple CSS filters as follow.
<div class="philter blur_5_hover_0 grayscale_100"></div>
5. Apply a custom SVG filter to the element.
<div class="philter svg_filter"></div>
Change log:
v1.2.0 (2016-03-03)
- Add 6 vintage SVG filters and fix inconsistent filter size
- Transition CSS rules are now applied only to Philter elements.
- Fixed: Inconsistent height on SVG filters.
- Fixed: CSS rules being applied to the first selector of the element and breaking on elements with same selectors.
- Fixed: SVG adding to body height.
- Fixed: Filter count increasing faster than data is being returned from the server causing wrong filter ids.
v1.1.1 (2015-12-15)
- Plugin version in vanilla JavaScript.
- Option to remove 'philter' from data attributes to make markup shorter.
- False element width or height being set on custom SVG filters.
- Changed classes to data attributes to describe filters.
- Describing filters with classes. The old version still can be found in dist directory.
v1.1.0 (2015-11-08)
- added more filters.
This awesome jQuery plugin is developed by Specro. For more Advanced Usages, please check the demo page or visit the official website.
