CSS Art - The CSS Gallery

This site offers a demonstration of two possible methods for creating images from CSS code. CSS can be a solution to keeping file sizes smaller and websites lighter than they might otherwise be if they include image file types like .jpg and .png. It also guarantees code-first image responsiveness simply by the correct application of appropriate media queries, saving developers the time and effort involved in formatting and resizing image files for optimum rendering at multiple breakpoints.

The image on the left is built from rows of square divs of the same size but different colour fills. The concept is that each div represents one "pixel" in a larger image that the eye sees when all the divs are combined.

The image on the right is created using the CSS <clip-path> property which essentially creates a shape from a clipping mask over an area of background colour that can then be manipulated as necesssary using positioning.

These techniques can be used to produce relatively simple to incredibly complex, infinitely scalable images. The possiblities of using CSS and the browser to "draw" are only limited by the imagination.