pixely

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..