Git Product home page Git Product logo

cssfilterlab's Introduction

CSS FilterLab

Deprecation

This repo is unmaintained and has been archived.

Supported Browsers

CSS FilterLab uses CSS Filters, an exciting web technology that's becoming available in more and more browsers. Check out Can I Use for availability information.

Articles about FilterLab

Introducing CSS FilterLab by Razvan Caliman at Adobe

CSS FilterLab Detailed Walkthrough from Alan Greenblatt's blog

Note: These articles mention CSS Custom Filters, an experimental technology no longer available in CSS FilterLab.

Contributing to FilterLab

Pull requests are reviewed and accepted.

Check out our contributing page for more info.

Running FilterLab Locally

Git Submodules

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

Build

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

File System Access

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.

Legal

Notices, terms and conditions pertaining to third party software are located at http://www.adobe.com/go/thirdparty/ and incorporated by reference herein.

jQuery

Copyright 2012 jQuery Foundation and other contributors http://jquery.com/

MIT license

jQuery UI

Copyright (c) 2012 Paul Bakaus, http://jqueryui.com/

MIT license

ANGLE

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

CodeMirror

Copyright (C) 2012 by Marijn Haverbeke [email protected]

MIT License

cssfilterlab's People

Contributors

achicu avatar awgreenblatt avatar cjgammon avatar drublic avatar emalasky avatar jacobgoldstein avatar larz0 avatar mibalan avatar mvujovic avatar oslego avatar pigucatalin avatar rhudea avatar stevengill avatar tombyrer avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

cssfilterlab's Issues

Should share presets rather than custom filters

I think the focus should be on sharing a whole preset including multiple filters rather than just one filter. The expectation I had was I would be sharing the whole slew of filters I had applied. But then I realised it only shares the 'forked' filter.

  • I think we should ideally share all of these filters in one gist.
  • The custom filters should not have a fork option.
  • The custom filter when added should have an icon to edit the parameters (like the one that gets presented when you fork a custom filter).
  • The help file should explain how to submit a custom filter (and ideally no UI will be presented in the tool itself).
  • The Save as preset button should also have a 'share this preset' or something similar so people can share the whole state publicly.

blend modes not updating

This issue was originally logged by Max. This is a bug in WebKit that we still need to log. Once we log it, we should post the URL to the WebKit bug.

Error while opening homepage in FF 15.0 on Ubuntu 11.04 which prevents user from getting the instructions about downloading a supported browser.

Steps:

  1. Open http://html.adobe.com/webstandards/csscustomfilters/cssfilterlab/
  2. Notice the loading page doesn't change
  3. Open Firebug console

Result:
NS_ERROR_FAILURE: Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMHTMLCanvasElement.getContext]
http://html.adobe.com/webstandards/csscustomfilters/cssfilterlab/lib/application.js
Line 179

Expected:
No errors and instructions on how to download a supported browser for my OS

Environment:
Firefox 15.0
Ubuntu 11.04

none of the controls in tile-explosion > tileTransform area do anything

  1. Add Filter > Custom > tile-explosion.
  2. Try to move the sliders in the tileTransform area (rotateX, rotateY, rotateZ, scale, perspective)
    -> Nothing happens in the preview pane. The same sliders in the 'transform' area above do work though (rotateX, rotateY, rotateZ, scale, perspective)

Presets save the latest changes, even if Save As Preset button not clicked

Repro

  1. Start from a clean file (no filters).
  2. Set preset drop-down to Default.
  3. Add Filter > Built-in > drop-shadow.
  4. Click the Save As Preset button > name it 'shadow'.
  5. Switch to Default preset.
  6. Delete the drop-shadow filter.
    -> There are no filters now.
  7. Switch the preset drop-down to the 'shadow' preset.
    -> The drop-shadow filter appears again.
  8. Delete the drop-shadow filter but don't click the Save As Preset button
    -> There are no filters now.
  9. Switch to Default preset.
    -> There are still no filters.
  10. Switch back to the 'shadow' preset.

Actual Results:
There are still no filters. Presets are being saved without clicking the Save button.

Expected Results:
The drop-shadow filter appears, since that was the last saved state of the 'shadow' preset.

Blend mode and potentially mesh resolution should be configurable parameters

At present, if I want to change the mesh resolution or multiply mode for an applied resolution, I need to edit the filter. I can't just add the filter and experiment with the mesh resolution or multiply mode. These should be configurable parameters in the left sidebar. I can definitely see where you could be able to set the default values for these in the filter configuration, but then you should be able to customize that in the left panel.

Consider using Grunt.js

While looking at the source code I found noticed that the JS and CSS files are not concatenated or minified but lying around open. Even in the online version over here.

Personally I think encouraging people to use best practices includes telling them to do these steps.

Also from what I've seen the JavaScript is not lint-free

I'd like to suggest to use Grunt.js for these tasks.
If there is any interest in implementing this I'd be happy to volunteer.

Pictures/online demo

I'm not sure what this project is supposed to do; I'm sure some pictures &/or online demo will help me & others become interested.

Fonts don't look good in Chrome Canary Win

In general, the fonts in Chrome Canary Win look blocky and not good. The fonts look much better and smoother on Mac. It's really noticeable in the Help documentation.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.