DEV Community

loading...

Table Tennis in Pure HTML CSS 🀯

ben profile image Ben Halpern ・1 min read

No JavaScript to be found here:

Discussion (32)

pic
Editor guide
Collapse
afif profile image
Temani Afif

too bad there is no Play button ;)

Collapse
codeswaps profile image
Collapse
afif profile image
Temani Afif

nah, in that one there is JS :)

Thread Thread
Sloan, the sloth mascot
Comment deleted
coffeecraftcode profile image
Christina Gorton

Usually because you can learn a lot by trying to limit yourself. These aren't experiments you would put in production usually but they help you learn new concepts in a fun way. And sometimes they are just for fun!

Thread Thread
afif profile image
Temani Afif

what's the point of running a 2h marathon and get tired if we can simply use a car to reach the final line in 10min ? ;)

Thread Thread
lifelongthinker profile image
Sebastian

I don't see any drivers being praised for 10 minute drives. But I surely see lots of marathon runners being celebrated for their achievements. Looks like there's more to it than meets the eye.

Thread Thread
ben profile image
Ben Halpern Author

Of course this in particular is more for art and experimentation than practicality, but there are certain situations where constraints exist for very valid reasons (security being a huge one)... It's not impossible, but much harder to, say, pull XSS without a full programming language running.

Thread Thread
afif profile image
Temani Afif • Edited

@lifelongthinker it was a rhetorical question :)

Thread Thread
lifelongthinker profile image
Sebastian

Sorry, it's late here and my rhetorical question detector is apparently already asleep πŸ˜„

Collapse
kjbaxter65 profile image
Kevin J. Baxter

Great game. Thanx for sharing!

Collapse
lionelrowe profile image
lionel-rowe

Could you replace this with a plain link or autoplay-disabled embed? The autoplay audio is kinda irritating.

Thread Thread
codeswaps profile image
Collapse
lifelongthinker profile image
Sebastian

This is an incredible achievement. Someone surely knows their way around CSS.

I'm just a bit appalled by some of the comments here. If people don't like this kind of craft and art, that's okay. But belittling someone's achievements is just foul play.

Collapse
gypsydave5 profile image
Collapse
taikedz profile image
Tai Kedzierski • Edited

OK, nope, I am legit impressed. Copied the HTML and compiled CSS into a local file, removed the sole font import. Totally works. From what I can see, leveraging webkit animation instructions and deterministic re-calculations that make it look like a random game...

Reminds me of the feats done with palette shifting for animating 8-bit scenes and even drawing completely new images into a static array of non-changing bits.

Collapse
devlorenzo profile image
DevLorenzo

So you are also a developer! I didn't know...

Collapse
madza profile image
Madza • Edited

and I thought the calculator was a challenge πŸ˜€πŸ˜€

Collapse
localstorage profile image
Michael Hungbo

This is amazing!

Collapse
bpedroza profile image
Bryan

Really cool!

Collapse
baenencalin profile image
Calin Baenen

Wow. This is impressive.

Collapse
davinderpalrehal profile image
Davinderpal Singh Rehal

That is a level of CSS I can only dream of having.... trying to reproduce some of these effects to learn from

Collapse
mzaini30 profile image
Zen

Sass is JS in CSS πŸ˜‚

Collapse
kevindublin profile image
Vin Dublin

Wow. Even the ball's shadow. This must've been super fun to create.

Collapse
lankabhedi profile image
Samnit M.

The comment section did not pass the vibe check.

Collapse
rickyreyes profile image
RickyReyes

Wow! That's insane. Well done.

Collapse
alin11 profile image
Ali Nazari

I can only do "display: block" with CSS

Collapse
lautarolobo profile image
Lautaro Lobo

Cool!!

Collapse
rahulbanerjee99 profile image
Rahul Banerjee

This looks really cool!

Collapse
lepinekong profile image
lepinekong

Wow :)

Collapse
jmau111 profile image
Julien Maury

impressive

Collapse
tyler320sc profile image
Tyler Carroll

Really cool!