css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image


  1. Mind == blown. Awesome work Fabrice, it's amazing. Congratulations. :)

  2. Thanks alot. It was quite tricky to achieve this.

  3. Yes! I've always thought this would be a fun one to try and reproduce. Especially since the GIF on their own site is so nasty.

  4. lol, this is so awesome!

  5. Thanks a lot. It was fun to make this. It totally awesome what can be achieved with gradients.

  6. This is exactly the kind of Pen that stirs up the BUT IS IT PRACTICAL kind of discussions (e.g. http://twitter.com/gregwhitworth/status/261143695863193600). On which I have some thoughts.

    1) Not everything needs to be practical, especially on CodePen where experimentation is the point of it's existence.

    2) This one might actually be practical. It would save an HTTP request. The repetitive nature of the CSS would gzip to very very little, AND it would be in the cached global stylesheet. So I think this particular demo is pretty close to being actually practical.

  7. I totally agree with you Chris.

    I think nothing should be marked as "useless", because everything here is an experiment. And like in the real world, some experiments might be ultra usefull some day in the future...

  8. Me, too. Totally agree on both point especially on the second one. I will try to improve the stylesheet a little more, its not perfect yet.

  9. Its a little bit better now.

  10. Getting better and better.

  11. Super impressed with this! I'm so stoked that everyone is starting to realise that non semantic markup is a bad idea, even in experiments. Awesome work, Fabrice!

  12. Thanks for the kind words. Glad you like it.

  13. Awesome. As long as you are enjoying what you are doing, nothing can be seen as waste.

  14. Thanks for you comment Chris. This is actually great work and it effects the development of the web, I had the same critics on my work Traffic light using CSS: "Sir, this is the most useless thing I found on the World Wide Web" http://azik.me/traffic-light-using-css/

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.