Trying to reverse-engineer Microsoft site...

Why do you need to reverse-engineer the site? Surely you can just create the effect from scratch.

It just seems to be a tile <div> with a CSS3 gradient applied with a container <div> overlaid containing the animated elements, in this case an icon and some text that slide up then back down on a timer.

ApOks hit the nail on the head in my opinion, all I can add is use jQuery with the slider plugin to move content divs around based on ID's, z-indexing and event triggering using some not so tough to do Javascript. The rest is up to a good designer to make the nice looking tiles, but their behavior is pretty routine stuff.

http://jqueryui.com/slider/

bitfidelity said:

You guys are right. I also found some good information here that would probably let me create the full-screen animation effect.

I know this should probably be simple, but what is the easiest or best way to create the actual tile grid? Will merely pure CSS and floats do the trick?

Click to expand...

I found it amusingly ironic that the link you provided which uses CSS3 3D transforms doesn't work on MSIE browser and you're trying to create a Microsoft tiling page. I advise you use the basic concepts on that link but consider using the jQuery plugin I named. Add to the graphics any really advanced styling to accomplish the effect cross browser compatible (if needed at all), but be smart about it by optimizing or adding to CSS sprites if so.

Absolutely you'll use container div's and CSS2 floats and such to create the tiling effect. Is there any other way? If you were thinking a table -- that's for tabular data only, not a best practice these days. If not, what else did you consider?