https://github.com/ilyashubin/FilterBlend

CSS blend modes and filters playground
https://github.com/ilyashubin/FilterBlend

Last synced: 4 months ago
JSON representation

CSS blend modes and filters playground

• Host: GitHub
• URL: https://github.com/ilyashubin/FilterBlend
• Owner: ilyashubin
• Created: 2015-10-28T20:22:55.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2016-02-02T20:10:19.000Z (about 9 years ago)
• Last Synced: 2024-08-01T00:40:09.786Z (7 months ago)
• Language: JavaScript
• Homepage: http://ilyashubin.github.io/FilterBlend
• Size: 3.25 MB
• Stars: 250
• Watchers: 10
• Forks: 41
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-vue-cn - **FilterBlend ★135**

README

        
# FilterBlend

FilterBlend is a playground for the new CSS `background-blend-mode` and `filter` properties.


Load your images and combine blending with filters to achieve some really unique effects!

[![FilterBlend Screenshot](https://github.com/ilyashubin/FilterBlend/blob/master/screenshot.jpg?raw=true)](http://ilyashubin.github.io/FilterBlend/)

### Some Details

* Using awesome [Vue.js](https://github.com/vuejs/vue/) as a foundation.

* Good ol' [jQuery](https://github.com/jquery/jquery) with [Nano Scroller](https://github.com/jamesflorentino/nanoScrollerJS) and [Sortable](https://github.com/RubaXa/Sortable).

* [Font-awesome](https://github.com/FortAwesome/Font-Awesome) icons.

* Color highlighting powered by [Prism.js](https://github.com/PrismJS/prism).

* Development tools: Gulp, Jade, Stylus with Autoprefixer and Babel for JS.

### Hints

* Paste image URL you want to preview, or pick your local image.

* Drag preview area to change position.

* Use mouse wheel to change size.

* Click to switch current background layer.

* All filter values can be changed by dragging.

### Local Setup

To install dependencies and run local server:

```

$ npm install

$ gulp

```

Server starts at `http://localhost:8000/`