Paolo: I hope you’ll try this other game, KABOOM, a spaceship browsergame.
ralph: Thats pretty cool.
Sean P. Aune: Glad you enjoyed the post:) Yes, it was a ton of work, but well worth it!
alpha: Thanks for the inclusion!
Wesam Saif: This is very similar to the NoGray Color Picker http://www.nogray.com/color_pi cker.php

Timelapse CSS

Matthew Buchanan had a little fun and created a Timelapse CSS example that lets you walk through the process of how a browser would put together a page if it was a human artist:

When building website templates, I’m constantly switching between a view of my CSS code and a view of the page I’m working on in a browser. At my most fevered I’m switching from one to the other after every couple of amendments, to ensure my additional rules are having the intended effect. Over time, were I to record this incremental buildup, it would paint a reasonably good picture of my approach to converting a design comp to a CSS layout.

With this in mind, I thought it might be useful to try to capture the process automatically and then play it back. I’ve seen this done using a collection of manual screen captures, but that didn’t seem a particularly elegant or easily reproducible solution.

As a proof of concept I cobbled together a (stylistically unsound) function to traverse the stylesheets of the current page (in reverse order) and remove a property from each rule every tenth of a second.

PLAIN TEXT

JAVASCRIPT:

function timelapseRemoveCss() {

var interval=0;

for(var i=document.styleSheets.length-1;i>=0;i–){

rules=document.styleSheets[i].cssRules;

for(var j=rules.length-1;j>=0;j–){

var attributes=rules[j].style.length;

for(var k=0;k<attributes ;k++){

interval+=100;

var timeout = “document.styleSheets[”

+i+“].cssRules[”+j+“].style”

+“.removeProperty(document”

+“.styleSheets[”+i+“].cssRules[”

+j+“].style[”+0+“])”;

setTimeout(timeout,interval);

}

}

}

}

feel free to leave a comment

Comment Guidelines: Basic XHTML is allowed (a href, strong, em, code). All line breaks and paragraphs are automatically generated. Off-topic or inappropriate comments will be edited or deleted. Email addresses will never be published. Keep it PG-13 people!

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>

All fields marked with " * " are required.

Using the - a Lemon-Lime mod

July 25, 2008

July 25, 2008

July 25, 2008

July 25, 2008

July 25, 2008

July 25, 2008

XFN

WordPress

Timelapse CSS

Read more on the source site

feel free to leave a comment