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

 
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
 
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
 
lorenzoblog profile image
Lorenzo •

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
 
taikedz profile image
TaiKedz • • 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
 
calinbaenen profile image
Calin Baenen •

Wow. This is impressive.

Collapse
 
mzaini30 profile image
Zen •

Sass is JS in CSS 😂

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
 
lautarolobo profile image
Lautaro Lobo •

Cool!!

Collapse
 
alin11 profile image
Ali Nazari •

I can only do "display: block" with CSS

Collapse
 
lankabhedi profile image
Sam •

The comment section did not pass the vibe check.

Collapse
 
kevindublin profile image
Vin Dublin •

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

Collapse
 
tyler320sc profile image
Tyler Carroll •

Really cool!

Collapse
 
rickyreyes profile image
RickyReyes •

Wow! That's insane. Well done.

Collapse
 
lepinekong profile image
lepinekong •

Wow :)

Collapse
 
rahulbanerjee99 profile image
Rahul Banerjee •

This looks really cool!