CSS FilterLab is using some cutting-edge technology that is available in the latest Google Chrome Canary and WebKit nightly builds. To enjoy the full experience you'll need to turn a few knobs:
- Download and install Google Chrome Canary
- Type
chrome://flags/in the browser's address bar - Find the Enable CSS Shaders flag and turn it on
- Find the GPU Accelerated SVG Filters flag and turn it on
- Relaunch the browser
- Download and install WebKit nightly for Mac OSX
- Open the browser's preferences panel. Go to the Advanced tab and tick to show the Develop menu in the menu bar.
- In the browser's menu bar select Develop > Enable WebGL
Enjoy CSS FilterLab!
Pull requests are accepted. Note that the FilterLab team may not be able to respond immediately because they are hard at work implementing CSS Custom Filters in browsers. Nonetheless, they can usually respond to you and review your change within a couple of weeks.
The CodeMirror library is linked as a git submodule. After you clone the project on your machine you'll need to setup the submodules and pull in their code.
cd ./path/to/css/filterlab/ $ git submodule update --init
CSS FilterLab uses Grunt.js to concatenate and minify JavaScript & CSS resources. Grunt.js is build on nodejs, so if you don't have it already installed, go to node.js website and follow the instructions to install it. After that use the command line node package manager to install grunt.js:
$ sudo npm install -g grunt
The grunt.js project file uses other node.js modules. To quicly install all the required libraries run "npm install" in the project folder.
cd ./path/to/css/filterlab/ $ sudo npm install
You also need to make sure you have Ruby & Sass installed. If you're on OS X or Linux you probably already have them installed. Try ruby -v in your terminal. When you've confirmed you have Ruby installed, run sudo gem install sass to get Sass.
To build CSS FilterLab, you need to run the "grunt" command line tool in the project folder. This will generate the "dist/" folder.
cd ./path/to/css/filterlab/ $ grunt
CSS FilterLab requires XHR access, but that doesn't work very well when loaded from file:// URLs. For that reason running CSS FilterLab requires serving it from a server. The easiest way to do that on a Mac would be to use python's simple server:
cd [./path/to/css/filterlab]/dist/ python -m SimpleHTTPServer
Open http://localhost:8000 in your browser.
Notices, terms and conditions pertaining to third party software are located at http://www.adobe.com/go/thirdparty/ and incorporated by reference herein.
Copyright 2012 jQuery Foundation and other contributors http://jquery.com/
Copyright (c) 2012 Paul Bakaus, http://jqueryui.com/
Copyright (c) 2002-2011 The ANGLE Project Authors. All rights reserved. Use of this source code is governed by a BSD-style license that can be found in the LICENSE file.
This JavaScript library was automatically generated from the ANGLE project using emscripten
For more information go to ANGLE.js
Copyright (C) 2012 by Marijn Haverbeke marijnh@gmail.com