DEV Community

How to create pure CSS illustrations and animate them - Part 1

Agathe Cocco on September 04, 2018

I've always had a great interest in design, illustrations and colour palettes, but having spent the last few years focusing on becoming a better fr...

Read full post

Jia Ming • Sep 5 '18

Splendid article! Very straight forward and neat. Thank you for this!

Just one question

* {
  position: absolute;
}

Is this how you make element to be fixed in the position? I am always confused with absolute, fixed and relative

Agathe Cocco • Sep 5 '18

Thank you, glad you liked it!

Yeah CSS positioning is weird. Here's roughly how it works:

By default, all elements have a static position, which means the normal flow of the page controls their positioning. It basically means that all elements are interdependent and will make room for one other.

With position: relative, the normal flow of the page still decides where the element is positioned, but gives you the option to nudge it with the top/right/bottom/left properties. So if you set for example, top:100px, it will move the element from its original position

Absolute positioning removes the element from the flow of the page and basically gives you full control on its position on the document. BUT an element that has absolute positioning will always refer to another element for its position. By default, its the document, so if you start using the top/right/bottom/left properties, it will position your element relatively to the document.
In order to have a child respond to the position of its parent, you need to set position absolute (relative works too) to the parent as well. If the direct parent doesnt have a position absolute (or relative), the element will go up the html chain and check its grand parent, great grand parent etc, until it finds an ancestor that has the position absolute value. then it will refer to it for its own positioning.

Position fixed also remove the element from the page and lets you position it with the top/right/bottom/left properties, but it will always do so relatively to the document. That's not very useful with CSS images, but is a great way to keep a navbar at the top of the document for example, even when scrolling occurs.

I like to use the code snippet above in CSS images, because it makes sure that an element will always be positioned relatively to its parent.

I hope this makes some sense? Let me know!

Jia Ming • Sep 5 '18

Thank you for the detailed explanation, I have a clearer idea of how this actually works,

In a sense, relative position will still be interdependent on the rest of the elements in the flow but allow me to move it around with the properties.

Absolute will always find a parent position to take reference from before applying the properties and fixed position does not care about anyone and will immediately apply the properties by taking reference to the document!

I shall go and experiment with this to firm up my foundation, and after I managed to draw something out, I shall show it to you! :D

Agathe Cocco • Sep 5 '18

That's it!
Have fun experimenting, I'm looking forward to seeing your first piece of css art!

Prashant Chaudhari • Sep 5 '18

* selects everything and make their position absolute because, we need absolute positioning in order to set the elements at desired place.

You can learn more about CSS Positioning on MDN CSS Docs.

Jia Ming • Sep 5 '18

Sweet! okay let me google on that as well! Thank you very much! :)

Marvin Danig • Sep 4 '18 • Edited

This is an awesome tutorial, thanks!

My friends and I made an entire book of ABCs with CSS3 Animals for babies sometime back: bubblin.io/book/abcd-animal-book-b...

Agathe Cocco • Sep 5 '18

Thank you!

I love the baby book!! Great work!

Marvin Danig • Sep 5 '18 • Edited

I was wondering if you'd be interested to do an OSS book of just fruits with CSS3 in your spare time? Like whenever!

Agathe Cocco • Sep 5 '18

Yeah that sounds like a fun project!

Marvin Danig • Sep 7 '18 • Edited

Cool… I'll set up a project on Github shortly. Excited!

Updates: Here we go!: github.com/marvindanig/fruits-and-...

Let's connect over email perhaps… I'm at marvin*marvindanig*com!

Ben Halpern • Sep 4 '18

Wow, really great walk-through!

Rajat Kanti Nandi • Sep 10 '18

I had tried a few earlier.
But I'm very much inspired by your post & want to try out one daily.
Just created Chrome logo art.
Here: codepen.io/rajatkantinandi/full/GX...
Although it's not perfect but want reach the level of perfection that you showcased eventually.
Thanks for the great post.

Ali Spittel • Sep 4 '18

This is an awesome walkthrough!

Bit Wombat • Sep 6 '18

I'm really interested in HOW you draw something like that.

At least with drawing software, there's a stylus or mouse that's sort of like a pencil.

But with numbers in CSS for position, size, etc., are you just trial-and-erroring things live until they look right? Nudging the positions, radii, aspect ratios around?

And how do you think up "oh, I need a red, clipped circle for the tongue, but elevated a bit from the mouth's bottom edge"?

CSS comes easily to me but for that stuff I'd appreciate some hints on how you think!

Many thanks.

Agathe Cocco • Sep 7 '18

I've been practicing CSS images for a while now so it comes more easily, but I didn't know where to start either when I first tried.
You can start by replicating an existing illustrations. Go on dribbble.com for example, and pick something simple to begin with. It'll let you focus on the actual process without having to worry about the creative aspect.
And yes, often play around a lot and try out different things before I'm happy with the result. Most of the time, I only have a rough idea of what I'm going to build, and my project takes shapes as I give it more thoughts. I also look at a lot of illustrations, drawings and photography, which keeps me inspired.
Hope this helps :)

Marcus M • Sep 4 '18

Awesome, really great stuff!

Be sure to check for browser compatibility though 😶

Agathe Cocco • Sep 4 '18

Oh yes! There are definitely some bugs in safari that I'm still working on, totally forgot to mention it. Safari is a real pain with css illustrations. Thanks for bringing it up!

Marcus M • Sep 4 '18

The beautiful things frontend-devs could create if people would actually update their browsers 😃

You haven't suffered until you try to implement a colored box-shadow in IE8 😭

Agathe Cocco • Sep 4 '18

Haha, true. I'm glad I don't have to worry about IE anymore in my current job. And certainly not in CSS images, they're only meant to be FUN! :D

MohananT • Sep 4 '18

Straight into my reading list

Mark • Sep 11 '18

Thank you for this fun and detailed article! Going on with Part 2 now...

Just one thing. - What you do with this...

*:before, *:after {
  position: absolute;
  content: '';
}

...is to give every element on the page a :before and :after pseudo element. If you check the markup in the dev tools this doesn't look very nice. ;)

Maybe it would be better to create a mixin like this...

@mixin pseudo($pos: absolute, $content: '') {
  content: $content;
  position: $pos;
}

...and then call it in your pseudo element like so:

&:after {
  @include pseudo;
  width: 100px;
  height: 80px;
  ...

Agathe Cocco • Sep 13 '18

Very good point!
I think if you have SEO or performance in mind, then going for a lighter markup is a great idea. I admit than in the case of CSS images, I am more interested in avoiding repetition. But for real life projects, I would definitely think of using a @mixin.
Thanks for your input.

Trang Le • Nov 4 '19

This is so inspiring, Agathe. I used to wonder what's the point of all those CSS illustrations on Codepen. Visually dazzling, yes, but I didn't get the point. Then recently I started playing with making CSS icons, and it dawned on me: It doesn't need to have a point. I have discovered aspects of CSS that I never knew, or never got the opportunity to practice. I'm excited by what cool drawings can be made with pure codes, and that's enough.

Shahid Shaikh • Apr 29 '20

Thank you so much for this well detailed article. I always wanted to design icons using pure CSS and tried a few times as well but it always seemed to be very hard. This article has been very helpful. Here's what I made: codepen.io/shahidshaikhs/pen/pojrrxX

Hill Onyechekwa • Jun 28 '20

i don't know but i don't think the way you use :after in this project works. Tried it but the every time i change the .tongue and .pupil selectors to :after the vanish. if you can explain why that will be great.

Russell Allen • Sep 6 '18

Thanks Agathe, i have been meaning to check out css images and saw this on twitter. I learnt heaps, and have been mucking around with sass for a while now and then you show me pug, i did not know there was anything like that for html. Guess where my efforts in learning are going to go now
Again thanks for the article
Russell Allen

Agathe Cocco • Sep 6 '18

That's great Russell, I'm glad you learn something new! Pug is a great tool. you can also have a look at Slim or Haml which are similar technologies

Negar • Sep 21 '18

Hey Agathe,
Thank you for your great article.
Just one thing I've noticed while creating the "mouth", in Codepen. I think "box-sizing" should be set to "border-box". Otherwise, the width of the mouth would exceed the face container. Please correct me if I'm wrong.

alex • May 3 '19

Nice post, at some point it's a lot easier to use display:flex; or stuff like justify-content:space-between (could've used that for .eye-group instead of positioning both eyes with left: 15px; and right:15px;) though.

.eye-group {
width:150px;
height:50px;

position:absolute;
top:10px;left:0;

display:flex;
justify-content:space-between;
padding: 0 15px;
box-sizing:border-box;

}

Shahid Shaikh • Apr 29 '20

Tettei Shahday-Annang • Sep 5 '18

Such a great article... Impressive! Thanks.

Ardhi Choiruddin • Nov 21 '18

cool

Mohammed Salman • Sep 4 '18

nice and very clear:)

Ashley Sheridan • Sep 6 '18

Pure CSS images aren't necessarily manually created. I made a tool a while ago to create single division images using CSS shadows: ashleysheridan.co.uk/blog/Single+D...

Agathe Cocco • Sep 6 '18

It's a great tool, I like the result. But what it does is convert an actual image to CSS. To me, the principle of pure CSS images is to build something using CSS as the main technology. But hey, it's my personal take on it, it's not like there's an official definition :)