DEV Community

Table Tennis in Pure HTML CSS 🤯

Ben Halpern on March 02, 2021

No JavaScript to be found here:

Collapse
 
afif profile image
Temani Afif

too bad there is no Play button ;)

Collapse
 
hackercabin profile image
Simon • Edited

Here is one you can play!

codepen.io/thecodingpie/pen/NWxzBxJ

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 ? ;)

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
 
hackercabin profile image
Simon • Edited

sure

Collapse
 
kjbaxter65 profile image
Kevin J. Baxter

Great game. Thanx for sharing!

 
ben profile image
Ben Halpern

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

Collapse
 
gypsydave5 profile image
David Wickes

but why

Collapse
 
lorenzoblog profile image
Lorenzo

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

Collapse
 
carmensstanley profile image
Carmen S. Stanley • Edited

WOW! This is so cool tennis court. Really appreciated. Actually, you should play tennis as well, I believe you will do wonders there as well.

Collapse
 
madza profile image
Madza • Edited

and I thought the calculator was a challenge 😀😀

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
 
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
 
heymich profile image
Michael Hungbo

This is amazing!

Collapse
 
calinzbaenen profile image
Calin Baenen

Wow. This is impressive.

Collapse
 
mzaini30 profile image
Zen

Sass is JS in CSS 😂

Collapse
 
rahulbanerjee99 profile image
Rahul Banerjee

This looks really cool!

Collapse
 
lepinekong profile image
lepinekong

Wow :)

Collapse
 
tyler320sc profile image
Tyler Carroll

Really cool!

Collapse
 
kevindublin profile image
Vin Dublin

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

Collapse
 
lautarolobo profile image
Lautaro Lobo

Cool!!

Collapse
 
lankabhedi profile image
Sam

The comment section did not pass the vibe check.

Collapse
 
alin11 profile image
Ali Nazari

I can only do "display: block" with CSS

Collapse
 
rickyreyes profile image
RickyReyes

Wow! That's insane. Well done.