Single Div Images Using CSS

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.

First, the heart div is a square that is rotated using the transform property with the function rotate() to set the square at 45degrees. Then using the pseudo-elements, before and after I created the two domes by setting them as the same size as the starting div and then making the circular by adding border-radius: 50%.

As you can see it works quite well.

Camera

With the camera image, I used many of the same techniques as I did with the heart. First and foremost is the pseudo-elements.

The main body of the camera is our starting div with a background colour and a border-radius. The top part of the camera, the viewfinder, is the before pseudo-element and it makes use of the border properties to create a trapezoid.

The circle for the lense is created using the after pseudo-element with a border-radius of 50% and border-colour of white with the same background-colour as the main body.

The only element I have not mentioned is the flash. This is using the box-shadow property of the lens. I have set it to 8.3rem -4rem 0 -60px white. These values stand for the following: horizontal-offset vertical-offset blur spread color. With the first two options I am setting the location, third I am setting the blur(0 in my case), forth the spread can be used to reduce the size and last is colour, which I set to white.

Adding colour

So let me create another simple shape but add some colour and some reflections.

As you can see the pill is two-tone. One side of the main div and the other is the pseudo-element before. The second pseudo-element, after, is used to create the shine. Giving the pill a slight 3D effect.

To do the shine I am using a background image of type linear-gradient. With this, you can define the start and to each gradient zone.

Avocado

With all the methods I used above I have tried something a little more difficult. An avocado. Very fashionable to have one of these on your table at the moment so why don’t we add one here.

As you can see, I tried to replicate the 3D aspect of the avocado by adding shadows to the overall shape and also to the pit. This one is simpler in construction but uses a lot more gradients and border-radius to create the shape. The main shape is created using the main div and the pit is made using the before pseudo-element.