|File Size:||302 KB|
|Official Website:||Go to website|
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:
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.
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>
- 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.
- 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.
- added more filters.