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 ... [Read Full]
markdown guide
 

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

 

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!

 

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

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

 

* 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.

 

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

 
 
 

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...

 

Thank you!

I love the baby book!! Great work!

 

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

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!

 

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.

 

Awesome, really great stuff!

Be sure to check for browser compatibility though 😶

 

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!

 

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 😭

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

 
 

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;
  ...
 

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.

 

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.

 

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 :)

 

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;

}

 

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

 

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

 

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.

 
 
 
 

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...

 

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 :)

 

I could re-create the exact thing by hand, the result would be the same. There would be no way to tell from the results.

Also, surely writing the original php script by hand should count for something? ;)

Correct. I suppose I'm thinking more of the process of building a CSS image rather than the actual result :)

 
 
 
 

Very well structured article showing how we can incrementally improve on the CSS image 👍🏼

 
code of conduct - report abuse