Behold the power of CSS: A mouse-controlled “game” with a one-tag HTML document
When you view source, you’ll see a single tag. When parsed, the browser produces a DOM with 4 elements: html, head, link, and body. It turns out that each can be styled as a regular block element. Using the :before and :after pseudo-classes gives us 12 stylable blocks.
All images are coded into the spreadsheet itself using data URIs. You end up with several images moving around the screen using translation transforms with CSS3 transitions and keyframes to produce game-like sprite movement.
The demo shows moving clouds, a space ship that follows the mouse, an enemy boss space ship and a trio of fighter ships all moving around the screen. The demo uses only -webkit-* prefixed CSS3 so it only works in Chrome.
Read more at Q42