README
Pixely
Convert images to pure CSS. Even animated GIFs!
Installation
Install Pixely with NPM:
npm install pixely
If you're only interested in the CLI functionality, you may wish to install globally.
Usage
You can import Pixely into your project and instantiate it with:
var { Pixely } = require('pixely');
A new Pixely instance accepts four arguments:
- The path to the image to convert (required)
- The path to the output folder (optional, defaults to 'output')
- The animation duration in seconds (optional, defaults to 1, ignored if image is not animated)
- The scale of the image (optional, defaults to 1, defines that 1 image pixel = ? CSS pixels)
Once instantiated, you can run the conversion process with the make()
method.
var pixely = new Pixely('path/or/url/to/image', 'path/to/output/folder', 2, 2);
pixely.make();
If you need more fine-grain control over when specific steps in the process occur, the class is broken up into five main methods:
pixely.getImage().then(() => { // read the image file (returns a promise)
pixely.buildHtml(); // build the HTML string
pixely.buildCss(); // build the CSS string
pixely.exportHtml(); // save the HTML string to the configured filepath
pixely.exportCss(); // save the CSS string to the configured filepath
});
CLI Usage
Once installed, you should be able to use Pixely from the command line using the pixely
command:
pixely 'path/or/url/to/image'
By default, Pixely will output the HTML and CSS files to /output/index.<html|css>
. You can change the output folder with the --folder
option:
pixely 'path/or/url/to/image' --folder=path/to/output/folder
pixely 'path/or/url/to/image' -f path/to/output/folder
Also by default, Pixely will generate CSS for a 1-second animation if the image is an animated GIF. You can alter the animation time in the CSS directly, or you can define an animation time (in seconds) with the --duration
option:
pixely 'path/or/url/to/image' --duration=4
pixely 'path/or/url/to/image' -d 4
Also by default, Pixely will scale the image to a 1-to-1 scale (1 image pixel = 1 CSS pixel). You can change the scale by setting the font-size
attribute of the wrapper div in the CSS directly, or you can specify your own scale with the --scale
option (whole numbers are recommended):
pixely 'path/or/url/to/image' --scale=2
pixely 'path/or/url/to/image' -s 2
Under the Hood
Pixely first reads a given image file to determine whether it is a static or animated image. From there it arranges the pixel information into a series of 'frames' (or a single frame if the image is static). Finally, it takes these frames and constructs a grid of pixels using the box-shadow method explained here by CSS-Tricks..