Drawing with CSS3

The latest CSS specification (also known as CSS3) has introduced a set of new properties which allow the developer to implement a lot of interesting effects on a web page. It is now possible to have round corners, shadows or even create nice background patterns. Inspired by others who had done amazing things with CSS3 we wanted to give it a try ourselves in order to get some first hand exposure to the new properties and see how much effort was required to do a little experiment with CSS3. We decided to try to draw our company’s logo using only CSS3.

This is the original logo:

How can you create such an image?

When drawing something with CSS, you first need to slice your image in smaller pieces (usually rectangles) and then separately implement every part of the image with CSS. Then you just need to position the pieces correctly so that it forms an image.

For example, shapes can be rendered styling only a <div> element:

-> a circle

#circle {
  background-color: red;
  border-radius: 50%;
  width: 100px;
  height: 100px;  /* if set to 200px it becomes an elipse for example */

-> one or multiple triangles

#triangle {
  /* border-color: transparent transparent red transparent; /* red triangle*/
  border-color: green blue red orange; /* multiple triangles*/
  border-style: solid;
  border-width: 100px;
  width: 0px;
  height: 0px;

-> outlines:

 #outlines {
  background-color: orange;
  box-shadow: 0 0 0 10px red, 0 0 0 20px blue, 0 0 0 30px green, 0 0 0 40px silver;
  width: 20px;
  height: 20px;

-> multi-columns:

#columns {
  /* vendor prefixes for gradients are required as currently no browser implements it without prefixes */
  background: linear-gradient(0, orange 50%, green 50%);
  background-size: 50px;
  width: 200px;
  height: 100px;

-> background patterns:

#patterns {
  /* note vendor prefixes for gradients are required */
  background: linear-gradient(45deg, silver 25%, orange 25%, orange 50%, silver 50%, silver 75%, orange 75%, orange);
  background-size: 50px;
  width: 200px;
  height: 200px;

The image below displays the resulting drawings created with the above codes.

If you have a modern browser, thanks to Lea Verou‘s interactive CSS playground dabblet you can check on this page how it would be rendered in your browser (some additional shapes are included too) as well as edit the CSS.

Now that we have seen the kind of things that can be achieved with the new properties on a single <div> element, let’s go back to our logo. We initially thought that we could try to create a flexible CSS3 image that would render properly when the logo would be scaled to different sizes. We tried to use percentages to set all the sizes instead of pixels. Unfortunately, this did not work well as it turned out that browsers handle percentages differently. On this page you can find an image that shows how different browsers rendered differently the logo when implemented using percentages.

This is just an example of what can go wrong with different implementations of the standard and why it is important to test with different browsers to ensure that the user gets the same experience independently of the browser they are using.

If we stick to fixed sizes (in pixels) the result provides a consistent experience in all the browsers we tests. You can take a look at the result: the CSS3 LeaseWeb logo!

It took me a couple of hours to come up with the first structure and a couple more for the tweaking. With some CSS knowledge, a bit of patience and creativity you can draw amazing images with CSS3.