DEV Community

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

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...
Collapse
 
jmtiong profile image
Jia Ming

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

Just one question

* {
  position: absolute;
}
Enter fullscreen mode Exit fullscreen mode

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

Collapse
 
agathacco profile image
Agathe Cocco

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!

Collapse
 
jmtiong profile image
Jia Ming

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

Thread Thread
 
agathacco profile image
Agathe Cocco

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

Collapse
 
pandaa880 profile image
Prashant Chaudhari

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

Collapse
 
jmtiong profile image
Jia Ming

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

Collapse
 
marvindanig profile image
Marvin Danig • 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...

Collapse
 
agathacco profile image
Agathe Cocco

Thank you!

I love the baby book!! Great work!

Collapse
 
marvindanig profile image
Marvin Danig • 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!

Thread Thread
 
agathacco profile image
Agathe Cocco

Yeah that sounds like a fun project!

Thread Thread
 
marvindanig profile image
Marvin Danig • 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!

Collapse
 
ben profile image
Ben Halpern

Wow, really great walk-through!

Collapse
 
rajatkantinandi profile image
Rajat Kanti Nandi

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.

Collapse
 
aspittel profile image
Ali Spittel

This is an awesome walkthrough!

Collapse
 
bitwombat profile image
Bit Wombat

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.

Collapse
 
agathacco profile image
Agathe Cocco

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

Collapse
 
marcus profile image
Marcus M

Awesome, really great stuff!

Be sure to check for browser compatibility though 😶

Collapse
 
agathacco profile image
Agathe Cocco

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!

Collapse
 
marcus profile image
Marcus M

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 😭

Thread Thread
 
agathacco profile image
Agathe Cocco

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

Collapse
 
mohanant profile image
MohananT

Straight into my reading list

Collapse
 
macurious profile image
Mark

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;
  ...
Collapse
 
agathacco profile image
Agathe Cocco

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.

Collapse
 
bytrangle profile image
Trang Le

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.

Collapse
 
__shahidshaikh profile image
Shahid Shaikh

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

Collapse
 
hills_ko profile image
Hill Onyechekwa

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.

Collapse
 
russellallen42 profile image
Russell Allen

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

Collapse
 
agathacco profile image
Agathe Cocco

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

Collapse
 
negarjf profile image
Negar

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.

Collapse
 
codealexx profile image
alex

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;

}

Collapse
 
__shahidshaikh profile image
Shahid Shaikh

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

Collapse
 
tetteis profile image
Tettei Shahday-Annang

Such a great article... Impressive! Thanks.

Collapse
 
ardhichoiruddin profile image
Ardhi Choiruddin

cool

Collapse
 
msal profile image
Mohammed Salman

nice and very clear:)

Collapse
 
ashleyjsheridan profile image
Ashley Sheridan

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

Collapse
 
agathacco profile image
Agathe Cocco

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

Collapse
 
ashleyjsheridan profile image
Ashley Sheridan

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? ;)

Thread Thread
 
agathacco profile image
Agathe Cocco

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

Collapse
 
dandevri profile image
Danny de Vries

Awesome introduction to creating CSS images 🖼

Collapse
 
dansyuqri profile image
Muhammad Syuqri

AWESOME! THANK YOU! 😊

Collapse
 
kokaneka profile image
kapeel kokane

Thanks a lot for this! Getting into css illustrations lately and this would help a lot!

Collapse
 
utkarshkalra profile image
utkarsh

thanks a lot, it really did clear a lot of my doubts

Collapse
 
robertcoopercode profile image
Robert Cooper

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

Collapse
 
astongemmy profile image
Aston Gemmy

You're amazing! Thanks for the easy-to-understand method you've adopted. So clear to understand.

Collapse
 
irwingb profile image
irwingb

Many thanks for this wonderful article

Collapse
 
vinsu profile image
vinsu rick

wow this is so cool

Collapse
 
bay007 profile image
egalicia

I share my implementation: codepen.io/bay007/pen/NEzwGW :D
Thanks.

Collapse
 
judecodes profile image
Cool

Hey I was wondering on where to get some inspirations for illustration?