What are Single Div Images?
In 2014 Lynn Fisher created a project called A Single Div where she only used a single Div and her CSS chops to create an image. She has created many interesting and complicated images using this technique but it is not very practical. I like it because in order to do this you need to have a strong understanding of CSS and the ability to make it work.
I have watched Lynn since she started this project and it amazed me that she could do something like this in CSS alone. I have always wanted to try it myself but I never got around to it. Thanks to Gecko I now have some time to give it a bash and bring you along for the ride. I am going to attempt to make a few of these images starting simple and getting more complex as I go along.
Some simple homespun examples
Since I am new to this image thing with CSS I am going to start really simple and do some basic shapes but before I do that you will notice that in all of my examples there are in fact two divs. The outer div is classed as ‘container’, I am using this to position the image I am displaying in each example. It is not part of the image, just a positioning tool.
With each of these examples, you can click the CSS button to view the code that creates the images.
Heart
So a heart is a simple enough shape. It is basically a box, rotated 45 degrees and then two circles added to create the domes on top. This is the exact approach I used with this one.
