DEV Community

Cover image for Join Me for 100 Days of Pure CSS

Join Me for 100 Days of Pure CSS

Suzanne Aitchison on May 16, 2020

Today marks the start of the Scottish 100 Days Project, the mission of which is to: give anyone, regardless of age or ability, the framework and ...
Collapse
 
9da profile image
9DA

I looked at this before and thought "That is so cool, but I don't have time." Now I do and I feel really eager to try, so I'll join and see how it is going. Starting my first picture now!

Collapse
 
s_aitchison profile image
Suzanne Aitchison

Amazing! Please do share what you create - would love to see 😁

Collapse
 
9da profile image
9DA
Thread Thread
 
s_aitchison profile image
Suzanne Aitchison

Love it! The moon phases are really cool. I've followed you on CodePen - looking forward to seeing your other creations 😊

Collapse
 
dhruvgarg79 profile image
Dhruv garg

Hey it is really awesome how with only css you have build this awesome mouse.

I checked codePen and can't really understand this:
polygon(29% 83%, 28% 94%, 45% 80%, 44% 100%, 0 100%)

How do you figure out stuff like above?

Collapse
 
s_aitchison profile image
Suzanne Aitchison

I'll let you in on my secret... (whispers): bennettfeely.com/clippy/ πŸ˜„

I'm still really new to this, so I use clippy as a starting point, and then once I've got something going in the CodePen I start tweaking with the percentages. Honestly I found it easiest to start learning about clip-path that way too - once you have a live example in your editor, you can start tweaking the percentages and begin to see what those percentages actually mean in terms of what comes out in the UI.

There's so many great tools out there πŸ˜„

Collapse
 
dhruvgarg79 profile image
Dhruv garg

Thank you for telling us your secret :)

I didn't knew about clip-path and polygon in css. I have done very basic web front-end. But this example is really awesome. I will also try to make a small thing using it.

Thread Thread
 
s_aitchison profile image
Suzanne Aitchison

Yay! I'd be excited to see what you make 😁

Yeah in my normal front-end life I'd never need something like clip-path (or if I did it would be very very rare!) which is partly why I thought this might be a fun challenge 😁

Collapse
 
waylonwalker profile image
Waylon Walker

This is a really cool tool. 😎

Collapse
 
minervalong profile image
Vanesa Perea

Interesting challenge! :D I'm trying 30DaysofJavaScript and I'm in CS50 week 0 so maybe I should save it for next round u.u However, I would use it only for design planets and space elements for a project...Super cute your mouse >o<

Collapse
 
s_aitchison profile image
Suzanne Aitchison

Ooh space and planets would be fun to do!

Collapse
 
minervalong profile image
Vanesa Perea

I want them to appear depending on time :D I'll follow along your journey :)

Collapse
 
bernardbaker profile image
Bernard Baker

Really like the mouse!! I've used clippy too.

Collapse
 
waylonwalker profile image
Waylon Walker

Holy cow!$&$! This is day one! You have some wicked css talent here. Can't wait to see what is to come!

Collapse
 
sanketmehta7 profile image
Sanket Mehta

Started something similar with bit of JS interaction. Here
codepen.io/sanketmehta7/pen/PoPRQgJ
codepen.io/sanketmehta7/pen/ZEbjjZP

Collapse
 
s_aitchison profile image
Suzanne Aitchison

These are so cool! 😍

Collapse
 
jlohani profile image
Jayant Lohani • Edited

That artwork is really cool and considering you created that purely through CSS is more amazing. Looking forward for more artworks in future.
Would follow along for sure. All the Best. ✌

Collapse
 
s_aitchison profile image
Suzanne Aitchison

Thank you so much! I have a whole lot to learn and already the learning curve has been steep!

I think the one-a-day aspect will help keep me from being too perfectionist about it though πŸ™‚

Collapse
 
jlohani profile image
Jayant Lohani • Edited

The best thing about these types of marathons is that it creates discipline. It is not easy for many to sit every day and do a specific task or study a particular topic for many consecutive days and that includes meπŸ˜….
I believe that "100 days of pure CSS" is a great initiative and wish you all the best again. I work fine with HTML and JS but I am not much good at CSS so I would be following your work daily. πŸ™‚βœŒ

Collapse
 
nishchit6 profile image
Nishchith Rao

I am thinking 100 cartoon characters would give me the motivation πŸ˜πŸ˜‚

Collapse
 
s_aitchison profile image
Suzanne Aitchison

That would be such a cool project!

Collapse
 
vaibhavkhulbe profile image
Vaibhav Khulbe • Edited

So cool! Looking forward to your projects. Good luck πŸ˜‰

PS: Followed you on Twitter!

Collapse
 
gnio profile image
Gnio

I look forward to once have the skills to join this kinds of amazing activities.

I also look forward to hear more from you. I'm following on CodePen.

Collapse
 
s_aitchison profile image
Suzanne Aitchison

In all honesty I feel like my skills are very minimal in this area πŸ˜… But practice makes perfect and I'm looking forward to learning a lot!

Thanks for following πŸ™‚

Collapse
 
mansoorkhan95 profile image
mansoorkhan95

Thankyou for this !!

I have knowledge of some very basic CSS .

I want to know how you define this Moon

:root {
--moon-size: 300px;
--moon-shadow: #