CSS-only experiments

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

"CSS experiment: Mouse shadow by on_the_wings, on Flickr" CSS experiment: Mouse shadow

Open experiment

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…


"CSS experiment: Gear by on_the_wings, on Flickr" CSS experiment: Gear CSS experiment: Gear CSS experiment: Gear

Open experiment

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

"CSS experiment: Pixel art by on_the_wings, on Flickr" CSS experiment: Pixel art

Open experiment

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

"CSS experiment: Click Challenge by on_the_wings, on Flickr" CSS experiment: Click Challenge

Open experiment

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).


2009-11-26: Gear is now on Chrome Experiments! Being the first CSS-only experiment over there :)

comments powered by Disqus