All Projects → Specro → Philter

Specro / Philter

Licence: mit
Philter is a JS plugin giving you the power to control CSS filters with HTML attributes.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Philter

Bounty
Javascript and SVG odometer effect library with motion blur
Stars: ✭ 724 (+62.7%)
Mutual labels:  svg, filters
Awesome Svg
A curated list of SVG.
Stars: ✭ 4,226 (+849.66%)
Mutual labels:  svg
Deepsvg
[NeurIPS 2020] Official code for the paper "DeepSVG: A Hierarchical Generative Network for Vector Graphics Animation". Includes a PyTorch library for deep learning with SVG data.
Stars: ✭ 403 (-9.44%)
Mutual labels:  svg
Pts
A library for visualization and creative-coding
Stars: ✭ 4,628 (+940%)
Mutual labels:  svg
Svg Screenshots
📸🧩 Browser extension to take scalable, semantic, accessible screenshots of websites in SVG format.
Stars: ✭ 404 (-9.21%)
Mutual labels:  svg
Datav React
React数据可视化组件库(类似阿里DataV,大屏数据展示),提供SVG的边框及装饰、图表、水位图、飞线图等组件,简单易用,长期更新
Stars: ✭ 427 (-4.04%)
Mutual labels:  svg
Jam
Jam icons is a set of SVG icons designed for web projects, illustrations, print projects, etc. Licensed under MIT
Stars: ✭ 398 (-10.56%)
Mutual labels:  svg
Scour
Scour - An SVG Optimizer / Cleaner
Stars: ✭ 443 (-0.45%)
Mutual labels:  svg
Automator Workflows
A collection of Automator workflows (services) that speed up your design / development process. Compatible with LaunchBar 6 and 7 Actions
Stars: ✭ 439 (-1.35%)
Mutual labels:  svg
Icons
Official open source SVG icon library for Bootstrap.
Stars: ✭ 5,735 (+1188.76%)
Mutual labels:  svg
Oblivion
The language of Art
Stars: ✭ 414 (-6.97%)
Mutual labels:  svg
Ngx Charts
📊 Declarative Charting Framework for Angular
Stars: ✭ 4,057 (+811.69%)
Mutual labels:  svg
Svg Turkiye Haritasi
SVG Turkey Map
Stars: ✭ 428 (-3.82%)
Mutual labels:  svg
Poplar
A web-based annotation tool for natural language processing (NLP)
Stars: ✭ 403 (-9.44%)
Mutual labels:  svg
Govips
A lightning fast image processing and resizing library for Go
Stars: ✭ 442 (-0.67%)
Mutual labels:  svg
Postcss Sprites
Generate sprites from stylesheets.
Stars: ✭ 402 (-9.66%)
Mutual labels:  svg
Vue Bar
Simple, elegant spark bars for Vue.js
Stars: ✭ 414 (-6.97%)
Mutual labels:  svg
React Native Svg Animated Linear Gradient
A wrap SVG component for animated linear gradient
Stars: ✭ 418 (-6.07%)
Mutual labels:  svg
Line Charts
A library for plotting line charts in SVG. Written in all Elm.
Stars: ✭ 445 (+0%)
Mutual labels:  svg
Iconify
Universal icon framework. One syntax for FontAwesome, Material Design Icons, DashIcons, Feather Icons, EmojiOne, Noto Emoji and many other icon sets (90+ icon sets, 80,000+ icons).
Stars: ✭ 439 (-1.35%)
Mutual labels:  svg

Philter v1.5.0

npm dependencies

Philter is a JS plugin giving you the power to control CSS filters with HTML data attributes. Visit the Demo page for examples.

Installation

Since version 1.3.0 Philter comes as vanilla js plugin or npm package. Download the plugin and move the philter directory to your js directory, then include it in your page:

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

or with NPM:

npm install philter

Usage

Node

const philter = require('philter')

philter(['index.html', 'post.html'], { tag: true, customFilterDir: '', customFilters: [] } (css, svg) => {
  console.log('CSS: ', css)
  console.log('SVG: ', svg)
})

You can also pass 3 parameters to philter:

  • tag - boolean - This enables the 'philter' part in data-philter-. If you don't use any plugins which use data attributes or they won't collide with Philter, you can set this to false to omit this part and shorten your markup.
  • customFilterDir - string - Directory where custom filters are stored.
  • customFilters - array - Array of custom filter names.

Browser

I highly recommend using Philter in Node and use the plugin version only for development and demonstration purposes, since the browser version doesn't support all the listed filters.

First initiate the plugin:

<script>
  new Philter({
    transitionTime: 0.5, // hover transition time
    tag: true // 'philter' in data attributes
  });
</script>

You can pass 3 parameters to Philter:

  • transitionTime - The hover transition time of default CSS filters
  • tag - This enables the 'philter' part in data-philter-. If you don't use any plugins which use data attributes or they won't collide with Philter, you can set this to false to omit this part and shorten your markup.

CLI

philter index.html post.html -c index.html -s index.html
Usage: philter [options] <file ...>

Options:

  -h, --help                     output usage information
  -V, --version                  output the version number
  -n, --no-tag                   No "philter" in data attributes
  -s, --svg <dir>                SVG directory or svg/html file to append to
  -c, --css <dir>                CSS directory or css/html file to append to
  -H, --html                     Pass HTML instead of filenames
  -D, --custom-filter-dir <dir>  Custom SVG filter directory
  -F, --custom-filters <list>    Custom filters

Format

Now you can start using the filters. The plugin uses this kind of syntax format:

data-philter-<filter>="<value>"

or

data-philter-<filter>="<value> <hover-value>"

You give an element the data attribute for a specific filter and then a value for it. You can also add another value that the filter will use when hovering on that element. For example:

<div data-philter-blur="5"></div>

This element would be blured in 5px radius. If we would add another value, like this:

<div data-philter-blur="5 0"></div>

The element would unblur when hovered over with the mouse. With filters that use more than one value you have to specify every value for hover too. You can add more than one filter onto an element by using the same method:

<div data-philter-blur="5 0" data-philter-grayscale="100"></div>

Philter even supports custom SVG filters:

<div data-philter-blur="5 0" data-philter-svg="filter"></div>

Where 'filter' in 'data-philter-svg' attribute is the ID of the filter. Also Philter has pre-built custom filters:

<div data-philter-color="#00ff00 50"></div>

This one would overlay the element with #00ff00 color in 50% opacity. More filters are to come in the near future. You have any suggestions or know a filter that certainly has to be present in Philter? Just contact me or Elephento team.

More info on filters

Here's a list of filters that you can use and their limitations in Philter.

  • blur
  • grayscale
  • hue-rotate
  • saturate
  • sepia
  • contrast
  • invert
  • opacity
  • brightness
  • drop-shadow - Requires 4 values. In the browser the 4th value instead of color is opacity 0 to 100%, color is locked to black.
  • svg - Custom SVG filter. 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.

Drop shadow filter in browser supports only black color because with it's already long class it would be even longer with rgba implementation.

Vintage

There are 6 vintage filters:

  • Rises contrast. Brings out details and colors.
  • Washes out the image with light brown sepia.
  • Raises the brightness and gives a green/cyan look.
  • Close to 3 but a bit less brightness and more green.
  • Close to 2 but mixed with violet. Gives a sweet/daydream look.
  • Grayscale but better (IMO :))

Duotone

Duotone filter maps shadows and highlights of the image to 2 different colors. First color is mapped to the shadow and second to the highlights. Colors for this filter should be provided in hex format e.g., #123456.

Experimental

This section contains filters that are experimental i.e. work only in one browser, have image breaking bugs (even though this whole SVG thing is pretty buggy) etc. These filters will be showcased here: Philter experimental.

Anaglyph filter tries to imitate the 3D anaglyph effect that is widely used for 3D images and graphic effects. So far this should work 100% only on Chrome. Also I use feBlend to cut off the offset part which means that the bigger the offset is the more of the image is being cut off the left side.

Custom

You can use filters that you wrote by yourself in NPM/CLI version by using the custom tag like this:

data-philter-cutom="<custom-filter-name>"

If using custom filters you must supply the directory where they're stored and custom filter names in the options. The file of the filter must have that name and its id must be that same name.

Compatibility

Philter was developed and tested on Chrome 46+, Firefox 41+, Opera 34+ and Edge 20+. The default CSS filters should be compatible with most versions of browsers that support filters. The custom filters are supported only by Firefox, Chrome and Opera. You may notice glitching on Edge when more than one hover element is on the page and loss of some filters when they are stacked on one element.

Issues

This is mainly due to SVG filter limitations or complexities. It may be solved in the future... or it may not.

  • On my recent tests with Chrome SVG filters stack with other filters but as always you may encounter bugs.
  • SVG filters don't support CSS transitions.
  • SVG filters actually know what to do on hover but ^ and you may encounter other bugs (like flickering and so on). Especially on Edge and IE browsers.

WIP

I'm working on all sorts of stuff that involves this plugin and doesn't. So please bear with the way I develop Philter. If you have any suggestions ideas or just wanna say something you can send me an email at [email protected] or tweet @baldassertation.

  • Gulp (I work with Gulp, so there will be no Grunt here. Sorry.)
  • Webpack
  • More custom SVG filters

License

Philter is licensed under MIT License.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].