Share your repls and programming experiences

← Back to all posts
🌦 ONLY CSS Raindrops⛈
ZarmDev (48)

Raindrops made with CSS and HTML (now SCSS too) only.
It's also responsive.

Comments
hotnewtop
ch1ck3n (2077)

im sorry but your "raindrops" looks like an invasion of mutant onions

jokes aside this is nice!

ZarmDev (48)

@ch1ck3n Yeah I'm fixing that rn

ch1ck3n (2077)

@ZarmDev also try making the movement more realistic. the raindrop is more tall at the top and shorter at the bottom

ch1ck3n (2077)

@ZarmDev yes better

a little faster please

ZarmDev (48)

@ch1ck3n Alright is this good?

Whippingdot (660)

now I can't see anything, make them a tad bit bigger, but not too big @ZarmDev

nbbcsf (23)

Your raindrops are circles...

ZarmDev (48)

@nbbcsf What are they supposed to be?

nbbcsf (23)

@ZarmDev like a drop shape? I upvoted it though... it's pretty good.

nbbcsf (23)

@ZarmDev so I think you could set a CSS ::after element, and make the ::after element a triangle, and position it correctly above the circle.

ZarmDev (48)

@nbbcsf Not sure how to do that :/

nbbcsf (23)

@ZarmDev can I help? Btw, it will make you 10x faster if you use the SCSS framework. I can set it up for you if you give me access.

ZarmDev (48)

@nbbcsf Oh damn that's good

nbbcsf (23)

@ZarmDev and the SCSS is only 27 lines!

ZarmDev (48)

@nbbcsf Yeah that for loop is pretty convient, I only did CSS cuz it looks cool to have "Only CSS" but it would have been better to do js or scss:)

ZarmDev (48)

@nbbcsf Wait, it's not only CSS now :/

ZarmDev (48)

@nbbcsf Why is there like 1000 dependencies

ZarmDev (48)

@nbbcsf It takes so much storage

nbbcsf (23)

@ZarmDev no you can delete it all now... it's just for compiling the SCSS, which turns into CSS, which makes it "Pure CSS". SCSS is just for development. Want me to clean it up?

ZarmDev (48)

@nbbcsf Oh btw I did edit the css I couldn't run the scss compile it didn't work

nbbcsf (23)

@ZarmDev in the Shell (NOT the console!!) run npm run sass:compile, and whenever you make changes to the SCSS file, it should automatically change the CSS file.

ZarmDev (48)

@nbbcsf I did it in the shell it just stayed like it for a long time and after like an hour it finished but nothing happened. Also I tried downloading but it's size is so big.

ZarmDev (48)

@nbbcsf I did it in the shell it just stayed like it for a long time and after like an hour it finished but nothing happened. Also I tried downloading but it's size is so big.

nbbcsf (23)

@ZarmDev once you run it, try making an edit to rain.scss, and watch the shell.

Joodsn (0)

ok im making files and making a super repl in github so can I use your code and put it in my github

ZarmDev (48)

@Joodsn I mean sure, just add credit somewhere (like a link I don't know)