Select Page

What are PureCSS Images?

How are images made? Have you ever thought about that? It’s a weird question, I know, but just go with it for a moment. Let’s list out the various types of images first. The 3 major categories are — Photographs, Drawings and Digital Illustrations. Photographs are the ones taken by cameras. These images are captured by a lens that takes in light and a device that processes this light to form an image. Drawings are made by hand, using various tools like pens, pencils, paints and more. Digital Illustrations are the images that are made via a computer or some electronic device. These images are created directly in the digital form.

All these types of images are made graphically — that is, they are created by visually manipulating parts of the image (Adjusting the lighting for a photo, mixing paints in a painting, resizing elements of a digital illustration). But, what if there was another way to create images — a fourth type of image? What if images couldn’t be captured or drawn; they could be built? That’s exactly what PureCSS images are.

Cascading Style Sheets or CSS is a web development language that is used for designing websites. If HTML forms the skeleton of a website, CSS would be the flesh. It exists over the skeleton and gives the website its physical appearance. Eventually, someone discovered that if they used HTML to create boxes, and then used CSS to manipulate the shapes, sizes, colors and positioning of those boxes, they could create nearly any image they could think of. That’s how PureCSS images were born. Since coding an image can become extremely time-consuming if the image is too complicated, PureCSS images operate more around Flat Design and Vectors, by making clean, minimalistic and cartoonish images like this Pikachu or this Bookshelf. However, you can often find coders building realistic images using PureCSS like this realistic working model of an iPhone 5S or complicated works of art like this PolyArt Elephant. Even functioning browser-based  Fidget Spinners have popped up in the PureCSS community!

The best thing about PureCSS images is that, they don’t depend highly on one’s technical knowledge of code. People assume that ‘programming an image’ is extremely difficult and requires mastery of a programming language. However, PureCSS images can be made by complete novices. Even basic HTML and CSS code can be used to build marvelous PureCSS images. They depend more on your creativity and your eye for good design, than your knowledge of Web Development.

And knowing how to make PureCSS images can strengthen your coding and artistic skills. If you look at any of your favorite works of art, you will notice that they can all be divided into basic shapes. A face starts with a circle for the head, two circles for the eyes, two circles for the pupils, two lines for the eyebrows, an oval or triangle for a nose and a semicircle or curved line for a smile. PureCSS images are built with the bottom-up approach, with coders creating these various subdivisions of an image, individually, and then putting them together to form a work of art. In creating PureCSS images like this, we not only improve our CSS knowledge and coding skills, but also improve our understanding of art, shapes, sizes, positioning of elements and much, much more.

You can check out my page on Codepen to see just how beautiful PureCSS images are. And, since making these images is a lot of fun and is quite challenging, both, from a coder’s point of view and an artist’s, I’ll be releasing a series of articles that will teach you how to make PureCSS images by yourself!

This post is also on Medium! Click here to check it out!