Task

I was interested in how far can I go in an attempt to move maximum out of HTML to CSS still having decent browser support.

Solution

I restricted myself in a next way. I can use only one tag for one object. So for example, the fish is one div with ”:before“ rule for the fin and the eye, ”:after“ for the tail and scales made of the gradient background. Obviously, all animation is made with CSS. Parallax is made with rules like a:hover+a+a+a… The same way checkboxes work.

By the way, have you noticed the graceful degradation?

The project is made using CSS + HTML.