Home / Questions / 269
Accepted
Ruslan López
Asked: 2020-12-03 08:45:02 +0800 CST 2020-12-03 08:45:02 +0800 CST

How does converting an image to css work?

  • 772

There are examples of very complicated images made exclusively with css on the web, such as the Mona Lisa in CSS .

Obviously, they must have used some algorithm to generate them.

I would like to know how they achieve it and if it is possible that the generated css is totally portable between the most common browsers.

css

2 Answers

  1. Best Answer

    In this particular case it is used box-shadowto draw each pixel as a small shadow colored and positioned appropriately to form the resulting image.

    This trick takes advantage of the following:

    • Multiple shadows can be defined for a single element
    • Each shade can be individually colored with any color
    • Each shadow can be individually positioned relative to the original element.

    Regarding the algorithm to generate it, it would be enough to go through the image pixel by pixel and convert each of them to a new line of box-shadow, modifying color and position. To verify it, it would be enough to read the code that appears linked in the example of your question, with which it has been supposedly generated: https://github.com/jaysalvat/image2css

    It should be noted that, beyond the artistic value and the initial surprise that something like this can be done, this technique has no real value, since each pixel of the image is encoded with a minimum of 24 bytes, an order of magnitude greater than any efficient image encoding (JPEG, BMP, WebP, etc.)

    • 7

  2. Although it is not exactly the same, you have the "images embedded in css" (in base64 format), it is not exactly a conversion but it serves as a technique to include the images in the css file itself. More detailed explanation of its use: http://librosweb.es/libro/css_avanzado/capitulo_6.html

    • -3