git clone https://depp.brause.cc/cssfuscator.git
cssfuscator transforms an input image into CSS (and a bit of HTML5).
See my blog post on it for more details.
Input image file name. Required argument.
Output file name. Required argument.
Unit used for coordinates. Default: "px". See MDN for recognized units. Use "em" for scalable output.
Scaling factor for coordinates and pixels. Default: 1. Factors may be floating point numbers.
HTML title as used in generated HTML output. Default: "Image".
CSS ID as used in generated HTML and CSS output. Default: "image".
Enable basic optimizations. This attempts representing coordinates in integer instead of floating point and hex color codes in the
Stylesheet name. Default: "style.css". Only meaningful in combination with
Mode of stylesheet generation. Default: "embed". Allowed values: "embed" (embed CSS in a HTML output file), "split" (generate both a CSS and HTML file, with
stylesheet-name specifying the file name of
the CSS file), "only" (generate only a CSS file). The
option specifies the respective file names.
Attempt converting an animated GIF into a CSS animation.
Display the abbreviated usage.
It's possible to arrange square blocks of a fixed size in any color by
box-shadow property repeatedly on a
<div>. This allows
one to display any bitmap image.
The resulting images are huge (preliminary tests show factors between
20x and 2000x for the generated CSS). The
attempts to lessen the impact, but doesn't really help. Consider
hosting the CSS in a separate file for caching and serving it in
Transparency support is very basic. A fully transparent pixel is simply omitted, for anything else the transparency is simply ignored.
Animated GIF support is rather basic at the moment and will hopefully allow for more customization soon.