Andy Li’s Blog - CSShttps://blog.onthewings.net/2009-11-24T16:35:00+08:00CSS-only experiments2009-11-24T16:35:00+08:002009-11-24T16:35:00+08:00Andy Litag:blog.onthewings.net,2009-11-24:/2009/11/24/css-only-experiements/<p>In the last week I have tried to make some <span class="caps">CSS</span>-only experiments.
Originally it’s just an idea to play some effects with <a href="http://webkit.org/blog/138/css-animation/"><span class="caps">CSS</span> animation
which now available in Webkit</a>. But at the end I am obsessed and
making games with <span class="caps">CSS</span>… Yup, that’s embedding game logic in …</p><p>In the last week I have tried to make some <span class="caps">CSS</span>-only experiments.
Originally it’s just an idea to play some effects with <a href="http://webkit.org/blog/138/css-animation/"><span class="caps">CSS</span> animation
which now available in Webkit</a>. But at the end I am obsessed and
making games with <span class="caps">CSS</span>… Yup, that’s embedding game logic in the place
which designed to be presentation layer only… :P</p>
<p>Video first, description follows:</p>
<iframe allowfullscreen="" frameborder="0" height="390" src="//www.youtube.com/embed/ec2pz_GqWEw" width="640"></iframe>
<h2>Mouse shadow</h2>
<p><img alt='"CSS experiment: Mouse shadow by on_the_wings, on Flickr"' src="http://farm3.staticflickr.com/2777/4129811385_f698cbc966_m.jpg"/> <img alt="CSS experiment: Mouse shadow" src="http://farm3.staticflickr.com/2762/4130576658_4419cd860c_m.jpg"/></p>
<p><a href="/wp-content/uploads/2009/11/css-experiment_mouse-shadow.php">Open experiment</a></p>
<p>It works on Webkit browsers only (Chrome, Safari).</p>
<p>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 <code>div > div > div > ...</code> is just too slow…</p>
<h2>Gear</h2>
<p><img alt='"CSS experiment: Gear by on_the_wings, on Flickr"' src="http://farm3.staticflickr.com/2513/4130576756_d12b7ee3e5_m.jpg"/> <img alt="CSS experiment: Gear" src="http://farm3.staticflickr.com/2694/4129811585_a120478478_m.jpg"/> <img alt="CSS experiment: Gear" src="http://farm3.staticflickr.com/2693/4130576954_19c1d75638_m.jpg"/> <img alt="CSS experiment: Gear" src="http://farm3.staticflickr.com/2771/4130576994_dc6d7c029f_m.jpg"/></p>
<p><a href="/wp-content/uploads/2009/11/css-experiment_gear.php">Open experiment</a></p>
<p>Again, works on Webkit browsers only (Chrome, Safari).</p>
<p>I find the deeply-nested div has quite a potential to make some more
things, so here is another product of it. Swapping the <span class="caps">CSS</span> transition
with <span class="caps">CSS</span> transform achieved something very similar to <a href="http://en.wikipedia.org/wiki/Fractal">fractal</a>.</p>
<p>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.</p>
<h2>Pixel art</h2>
<p><img alt='"CSS experiment: Pixel art by on_the_wings, on Flickr"' src="http://farm3.staticflickr.com/2732/4129811095_f867790c2c_m.jpg"/> <img alt="CSS experiment: Pixel art" src="http://farm3.staticflickr.com/2501/4129811141_a80400e2fd_m.jpg"/></p>
<p><a href="/wp-content/uploads/2009/11/css-experiment_pixel-art.php">Open experiment</a></p>
<p>This one works on all major browsers (<span class="caps">IE</span> 6/7/8, Firefox, Safari, Chrome) :)</p>
<p>This is a drawing board that you can click to draw pixel.</p>
<p>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.. <code><a
href="#123"></a></code>) and it works in all the browsers… except <span class="caps">IE</span>. <span class="caps">IE</span>
will turn the color when you click on it but it does not store it in the
history. So I switched to use <code>iframe</code>, that is setting the links to
open in the iframe and serve a dummy web page with random <span class="caps">URL</span>…</p>
<h2>Click Challenge</h2>
<p><img alt='"CSS experiment: Click Challenge by on_the_wings, on Flickr"' src="http://farm3.staticflickr.com/2505/4130576444_f87eb8b7e4_m.jpg"/> <img alt="CSS experiment: Click Challenge" src="http://farm3.staticflickr.com/2721/4130576522_c6ae207426_m.jpg"/></p>
<p><a href="/wp-content/uploads/2009/11/css-experiment_click-challenge.php">Open experiment</a></p>
<p>This one is Webkit browsers only (Chrome, Safari).</p>
<p>This is the latest experiment I made, which is really a playable game.
<a href="http://webkit.org/blog/324/css-animation-2/"><span class="caps">CSS</span> keyframe animation</a> 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 <code>:checked</code> in <span class="caps">CSS</span>. Finally a <span class="caps">CSS</span>
counter is used to label the checkboxes (actually a ordered list will be fine).</p>
<hr/>
<p>Update</p>
<p>2009-11-26: <a href="http://www.chromeexperiments.com/detail/gear/">Gear is now on Chrome Experiments!</a> Being the first
<span class="caps">CSS</span>-only experiment over there :)</p>