DEV Community

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

Agathe Cocco on September 04, 2018

This is the second part in a three-part series about CSS illustrations and animations. In this part, we will build a CSS Polaroid and then learn ho...

Read full post

Ana Liza Pandac • Sep 19 '18 • Edited

Hey Agathe, I really love this series, it's very informative. Thanks a lot.

I finished part 1 so before diving into this one, I tried my initial take on it first to check if I learned something from it, as you challenged as well.:) You can check it here if you have time: codepen.io/analizapandac/pen/KxbqOV.

I haven't read the full article yet so I don't know how you proceed with this but I'll check this out tomorrow and see.

Agathe Cocco • Sep 20 '18

Great job!! I love how you have a completely different take on this, yet the result is identical.
Glad you enjoyed the series :)

Ana Liza Pandac • Sep 21 '18

Thanks. I finished part 3 last night. It was an awesome read as well.

Hope to see more of your posts here.:)

Tolu Kalejaiye • Sep 12 '18

Tried my hand at doing this myself before coming back to the article for assistance and I think I actually did alright! Still struggling a bit to understand how/when to use pseudo-elements but I had a lot of fun building this. Thanks Agathe!

Agathe Cocco • Sep 13 '18

Glad you had fun Tolu! I tend to use pseudo selectors whenever an element is made of several parts. If an element needs at least one child to recreate the different parts, then its a good candidate. The flash for example is made of two rectangles, so we can use the actual .flash div to create one rectangle, and use one of its pseudo selectors to create the second one. However, I wouldn't use a pseudo selector of .flash to create an unrelated element, say, the blinker. Just like you would have the .blinker element be a child of flash. This doesn't make a lot of sense.

But don't worry to much about pseudo selectors if you are not comfortable with them just yet. You can use plain html divs too!

Sota Hatakeyama • Sep 20 '18

Thank you for your great article!

I found an errata about CSS animation. animation-iteration-count: infinite; is right.

.square {
  animation-name: rotation;
  animation-duration: 5s;
  animation-timing-function: linear;
  /* animation-fill-mode: infinite; */
  animation-iteration-count: infinite;
}

Shorthand animation: rotation 5s linear infinite; works though

Agathe Cocco • Sep 20 '18

Good catch, and thanks for reporting it. I'll edit the post.

Adam • Sep 11 '18

Hey, Agathe! Thanks for such an in depth look at CSS art! This is so well written and detailed, it really does seem like the perfect place to start for so many people!

One thing I noticed though, on the first code example targeting .polaroid you set the height to 280px and then to 50%. Plus, translating and giving a top position of 50% doesn't seem to center the .polaroid container for me. It sits half way between the left side and the center. Any ideas or was this not the desired outcome?

Agathe Cocco • Sep 11 '18

Thanks Adam! Oops, that's an error from my part. It should read "left: 50%;", and not "height:50%". This will fix your issue. I've amended the post now, good catch :)

Allan Dorr • Feb 13 '19

Hi Agathe,
Thanks for your tutorial. I finally played around with it some, and I wanted to fix one thing that was annoying me: The lens shadow turning with the lens. That makes me feel like the light source is moving every time there is a zoom. I just detached the shadow from the zoom element.
Here: codepen.io/aldorr/pen/BMPWEK
Thanks,
Allan

Victor Shi • Sep 4 '18

This is so cool! I have not thought much of CSS but thank you for sharing this. I think I will play around with some logos and animations this weekend.

Agathe Cocco • Sep 4 '18

Thanks! Looking forwards to seeing what you come up with :)

Gayatri Dunakhe GD • Dec 11 '22

Hey Agathe, It's really awsome thanks a lot for this!
I worndering about html file in that you put
.polaroid
.button
.flash
.polaroid-body
.blinker
.zoom
.stripes

how it's will work? there we want to added some html code for that? or this is a class's names?

Alexander Garcia • Sep 10 '18

This is pretty cool! It'd be awesome to try and hook this up to the WebRTC to take a webcam selfie.

Evan Kapantais • Apr 29 '20

Hey Agathe, great walkthrough. One thing: In the blinker animation you are using a Sass variable you haven't declared $red.

Prashant Chaudhari • Sep 6 '18

Thank you so much for this. I learned a lot. Excited to create something on my own.

Norhan Khafaga • Sep 9 '18 • Edited

Thank you for the helpful tutorial. I have applied it but using only one html div.
I hope you take a look codepen.io/norhanms/pen/BOJwop
May be it is not look perfectly done.

Agathe Cocco • Sep 10 '18

Nicely done! I haven't experimented with single div css images yet but it's on my list