DEV Community

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

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...
Collapse
 
analizapandac profile image
Ana Liza Pandac • 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.

Collapse
 
agathacco profile image
Agathe Cocco

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

Collapse
 
analizapandac profile image
Ana Liza Pandac

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

Hope to see more of your posts here.:)

Collapse
 
tkalejaiye profile image
Tolu Kalejaiye

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!

Collapse
 
agathacco profile image
Agathe Cocco

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!

Collapse
 
chooblarin profile image
Sota Hatakeyama

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

Collapse
 
agathacco profile image
Agathe Cocco

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

Collapse
 
adamthewizard profile image
Adam

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?

Collapse
 
agathacco profile image
Agathe Cocco

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

Collapse
 
aldorr profile image
Allan Dorr

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

Collapse
 
victoryshoe profile image
Victor Shi

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.

Collapse
 
agathacco profile image
Agathe Cocco

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

Collapse
 
gayatridunakhe profile image
Gayatri Dunakhe GD

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?

Collapse
 
asg5704 profile image
Alexander Garcia

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

Collapse
 
evankapantais profile image
Evan Kapantais

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

Collapse
 
pandaa880 profile image
Prashant Chaudhari

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

Collapse
 
norhanms profile image
Norhan Khafaga • 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.

Collapse
 
agathacco profile image
Agathe Cocco

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