Gecko v7 Gecko v7
  • +44 (0) 131 240 3390
  • +44 (0) 131 240 3390
  • Gecko Agency
    Design
    Brand Strategy
    Web Design
    Development
    Umbraco
    Custom API Integrations
    Custom Web Development
    Virtual Website Planning
    Digital Marketing
    Search Engine Optimisation
    Paid Search Marketing
    Content Marketing
    Social Media Marketing
    Support
    Support Packages
    Blog
    Case Studies
    About Us
    Careers
    Contact
    Edinburgh

    Single Div Images Using CSS

    12th September 2019

    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.

    Gecko Agency

    One final image. I couldn’t resist making our logo fully in CSS.

    Resources

    • CSS Tricks
    • Mozilla Hacks

    Have you made any cool single div images? Send us your links!

    - Pete

    12th September 2019 Share This:
    Read more from Gecko
    Working from home during the Coronavirus lockdown
    10 Actionable Email Marketing Tips That Converts
    Making the switch to Google Analytics 4
    Follow Us:

    Gecko Agency (Edinburgh)

    hello@wearegecko.co.uk
    t: 0131 240 3390

    t: 0131 240 3390

    Head Office

    Orchard Brae House
    30 Queensferry Road
    Edinburgh
    EH4 2HS

    Gecko Agency Ltd | Copyright © 2025

    • |GDPR
    • |Privacy Policy
    • |Cookie Policy