In the last week I have tried to make some CSS-only experiments. Originally it’s just an idea to play some effects with CSS animation which now available in Webkit. But at the end I am obsessed and making games with CSS… Yup, that’s embedding game logic in the place which designed to be presentation layer only… :P
Video first, description follows:
Mouse shadow
It works on Webkit browsers only (Chrome, Safari).
What I want to create is just some old-school shadow, fading etc. Turn
out using a deeply-nested div for the effect is quite stylish. The divs
are assigned to different classes based on their nested level to improve
performance because div > div > div > ... is just too slow…
Gear
Again, works on Webkit browsers only (Chrome, Safari).
I find the deeply-nested div has quite a potential to make some more things, so here is another product of it. Swapping the CSS transition with CSS transform achieved something very similar to fractal.
One little defect is I used percentage for the size of divs and the rounding number cause some gaps between divs… It is more noticeable when using resolution 3.
Pixel art
This one works on all major browsers (IE 6/7/8, Firefox, Safari, Chrome) :)
This is a drawing board that you can click to draw pixel.
I remembered there are hackers tried to get users’ browsing history by
using color-change of visited link. It impressed me to store valued in
the browsing history. Originally I used links with hash values (i.e.. <a
href="#123"></a>) and it works in all the browsers… except IE. IE
will turn the color when you click on it but it does not store it in the
history. So I switched to use iframe, that is setting the links to
open in the iframe and serve a dummy web page with random URL…
Click Challenge
This one is Webkit browsers only (Chrome, Safari).
This is the latest experiment I made, which is really a playable game.
CSS keyframe animation is used to simulate a timer. Lots of
identical checkboxes to act as an area to let user clicks on. They are
removed when clicked on it, using :checked in CSS. Finally a CSS
counter is used to label the checkboxes (actually a ordered list will be fine).
Update
2009-11-26: Gear is now on Chrome Experiments! Being the first CSS-only experiment over there :)