DEV Community

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

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

Agathe Cocco on September 04, 2018

This is the third part in a three-part series about CSS illustrations and animations. In this last part, we are going to build an animated lighthou...
Collapse
 
analizapandac profile image
Ana Liza Pandac

Thanks Agathe, I really enjoyed this series.

CSS animation is one of my weakness so this helped me a lot in gaining more understanding about it. I still have a lot to learn but that's the exciting part.:D

Hope to see more of your posts.

Cheers!

Collapse
 
aggelow profile image
aggelow

This post is just awesome! Although I had some issues with z-index and some elements just didn't want to show up cause of "bottom: 0;" in CodePen(Any guess why?). At least I made it in my own way of sort and I learned a hell lot out of these 3 posts.

Thank you and keep up the good work!

Collapse
 
agathacco profile image
Agathe Cocco

Not sure... if you add the link to your pen, I'd be happy to have a look

Collapse
 
aggelow profile image
aggelow

Here is the pen: "codepen.io/aggelow/pen/yxPBjW".

Thread Thread
 
agathacco profile image
Agathe Cocco

oh dear! that's because there's no size or position for the 'lighthouse-group' element. This is 100% my fault, I forgot this step in the tutorial (I've now amended the post). If you add the below CSS, and use the bottom property again, your issues should be fixed

.lighthouse-group {
width: 50%;
height: 100%;
bottom: 0;
left: 0;
z-index: 2;
}

Collapse
 
kspeakman profile image
Kasey Speakman

Awesome post! Thanks for this!

Collapse
 
ptaneja1 profile image
Pankaj Taneja

Another example of this

hyperoffice.com/microsoft/

Collapse
 
tattybess profile image
tattybess

Can someone explain why we assign $size: random(4)+px; before starting the
.star:nth-of-type(#{$i}) {

Collapse
 
wolfhoundjesse profile image
Jesse M. Holmes

Agathe, these were a blast to run through this morning! They've sparked my creative motor!

Collapse
 
agathacco profile image
Agathe Cocco

Yay! I hope you had fun :)

Collapse
 
anurella profile image
Anurella

thank you for the amazing tutorial. you can have a look at my work following your steps
0602379da2154291bc5e785b06d6562a.p...

Collapse
 
kokaneka profile image
kapeel kokane

Wow! I'm just speechless. What an awesome guide. Thanks a ton!

Collapse
 
viundesign profile image
VIUNDESIGN

Thank you for that really good explain itself series. This really help me a lot. Best wishes.