Launching an Images Website… Without Any Images
Tags: css, html, webdev, showdev
Published: 2022-09-21 01:02:49

---
title: Launching an Images Website… Without Any Images
published: true
description: In preparation for Divtober, I published a website with a collection of single-element CSS drawings.
tags: css,html,webdev,showdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mbp30chvwl2i4801r35u.jpg
canonical_url: https://alvaromontoro.com/blog/68015/launching-an-images-website-without-images
---

<p>Divtober is a coding challenge that happens in October. The goal is to create CSS art with a simple (but critical) condition: only use one &lt;div&gt; element (or any other HTML element as long as it is only one). Hence the name: Div + October = Divtober.

<p><a href="https://twitter.com/lynnandtonic">Lynn Fisher</a> organizes and promotes this event, aside from her regular Web Designer and Developer job, and has a beautiful collection of single-div CSS drawings that she showcases on her site, <a href="https://a.singlediv.com/">A Single Div</a>.</p>

<p>Last year, I participated in Divtober with other web developers and had a bunch of single-element CSS drawings myself. So, I decided to put some of them on a website similar to A Single Div. <strong>The result is <a href="https://cssdrawings.com">CSSDrawings.com</a></strong>.</p>

<p>There isn't a single image on the page. Even the icons are pure CSS, and toggle switches (also in CSS) control the animations.</p>

<h2 id="challenges">
  Challenges
</h2>

<p>A website about CSS and CSS art, entirely coded in CSS (and HTML, of course), can be challenging. Plus, I'm a Developer, not a Designer, which sometimes makes things a little more complicated. (To be completely honest, the layout is a clumsy copy of Lynn's A Single Div.)</p>

<p>But there were other additional challenges: <strong>how to make accessible something that is inherently non-accessible like CSS art?</strong> <a href="https://alvaromontoro.com/blog/67979/creating-accessible-css-art">I had some ideas about it from the past</a>, and put them to action. The result is a perfect score on Lighthouse, and an almost perfect score on Wave (with some warnings and a false positive.)</p>

<p>As part of the accessibility goal, I disabled all the animations from the drawings that had one and put them behind toggle switches, so <strong>users will get to choose if they want animations displayed or not</strong>, and they will need to be activated individually (which is also a significant performance improvement.)</p>

<p>Some things can be improved (repeated link names, working on that), but I am happy with the result so far. I may add a section with the code and the drawing side by side if I have time. But overall, it is ready for Divtober'22.</p>

<p><a name="answers"></a>Probably, the biggest challenge will be answering the questions that always pop up when I share something related to CSS art... Is it responsive? (<em>Yes, do you ask that to people sharing drawings on JPEG/SVG?</em>) Can you animate it? (<em>Yes, but I don't think I will if they are not already animated.</em>) Why CSS instead of SVG? (<em>Because.</em>)</p>

<h2 id="favorite-drawings">
  Favorite Drawings
</h2>

<p>There are over 90 CSS illustrations on the web page, so picking favorites is tough. Here are five of the drawings I enjoyed coding the most (in no particular order):</p>


![Cartoon of a stapler](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/45i7cw8orrwkide61hoa.png)

<h3 id="stapler">
  Stapler
</h3>

<p>A realistic illustration of a stapler coded in CSS and a single HTML element. (And <a href="https://cssdrawings.com/#red-stapler">there's a version in red too</a>!) The element is a checkbox, and it is interactive: click on it, and the staples holder will slide out and in.</p>

---


![Volume knob that goes from 1 to 11](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ky6lnqpjixdn3bexq1sz.png)

<h3 id="volume-knob">
  Volume Knob
</h3>

<p>I like the shadows and the realistic look. It is also functional as it uses an <code>&lt;input type="range" /&gt;</code> as the base for the drawing. Also, the background has some metallic texture (but that's "cheating" a little as that's the container element and not the knob in itself.)</p>

---

![A cartoon of a three dimensional dice](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/87zh2qma8a3jr6obv66c.png)

<h3 id="animated-dice">
  Animated Dice
</h3>

<p>At first glance, these dice may not look like much. It is even poorly animated (it's glitchy on Safari, luckily, most people won't notice) and incredibly simple as a 3D drawing. So why pick this as a "favorite"? Because it is a single element. A cube has 6 sides, but with a single HTML element we only have 3 sides to work with (the element in itself and the <code>::before</code> and <code>::after</code> pseudo-elements). The animation is more than just a simple rotation. 😉</p>

---


![Cartoon of a magician](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/chqnj91mpbmdqffb3x13.png)


<h3 id="magic-trick">
  Magic Trick
</h3>

<p>Making this illustration fit the screen was more challenging than creating it (which was also fun). A full "magic trick" with a single HTML element and CSS, no JavaScript or anything else involved. Can you guess how it works without seeing the code?</p>

---

![Cartoon of a woman's portrait](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zinpi0h4jpd6ouiyuau9.png)

<h3 id="womans-portrait">
  Woman's Portrait
</h3>

<p>This is the only drawing in this list that is not animated or interactive. But I like it. I normally don't get to draw women. Every time I try, I end up with something that looks like Gollum, but this was an exception (please don't comment out the <code>::after</code>). It also uses CSS custom properties, making it super easy to change the colors and add/remove features.</p>

---

### Now it's your turn...

**Have you ever done a drawing with CSS? And with a single HTML element? Will you join Divtober this year?**