gradient-scanner
Utility to generate CSS3 gradients from source raster files like mock images.
Features
- Loading for mockup files via URL or local file access (File API)
- Scanning of a user selected section of text for possible gradients
- User adjustment of the gradient estimations with live preview
- Cross-browser gradient CSS generation
Setup
Checkout
$ git clone git@github.com:kpdecker/gradient-scanner.git
$ cd gradient-scanner
$ git submodule update --init
Development Requirements
Development of the app must be done over a HTTP connection (or connection other than file://) due to the canvas security model.
Node Server Setup
In order to access files that are on URLs outside of the current server, we must proxy images due to the security model.
$ npm install express
Node Server Execution
$ cd ./server
$ node main.js
Development Plan
Development currently mid-phase 1.
Phase 1: Lowest Common Denominator
Implement support for only the features that are supported by both the latest WebKit and Mozilla implementations.
This amounts to:
- Linear gradients
- Radial gradients with a single center point
- Arbitrary number of color stops
Phase 2: Single Feature Mode
Support the features that are specific to a single browser, attempting to best match the display for the other browser.
This will add support for radial gradients with multiple center points and repeating gradients.
Phase 3: Automated Feature Detection
Implement automatic feature detection in addition to the user-input based system.