If you happen to be reading this post in a resizable window, please do so and play around 1100px wide. You will see how css sprites combined with media queries can play an animation of the header's desk. If you're on a mobile, follow along with your imagination, and come back here when you're on a desktop/laptop for a better demo.
The background image of the h1 a is a sprite where each instance of the desk rotates 10deg clockwise, in perspective. I modeled the desk using the beta version of Rhino3D for mac (which I'm really excited about, by the way), cleaned an .ai wireframe export of each 10deg step in Illustrator, and finally punched the wood texture using the vector paths in Photoshop. No CSS involved in the 3D aspect of this. I could have used image masks to skip the Photoshop step, but I still like it in Photoshop. Anyway. CSS media queries call the appropriate desk's instance of the sprite by repositioning it every 5 pixels intervals of the window's width.
@media only screen and (min-width: 1100px) and (max-width: 1105px) and (min-device-width: 1025px) {
h1 a { background: url(../img/bureaux.png) no-repeat center 0; }
}
@media only screen and (min-width: 1106px) and (max-width: 1111px) and (min-device-width: 1025px) {
h1 a { background: url(../img/bureaux.png) no-repeat center -125px; }
}
It's been a long time since I wanted to do this, and I'm really happy to show it now. It's a very stupid thing of course; no one will benefit from this but RWD nuts like you, I'm afraid.
Due to some Great Disturbance in the force, server side, I had to rebuild Bureau from the ground up. Good thing there weren't too many posts...
The positive outcomes are HTML5 markup, a more refined responsive behavior and a more comfortable night time reading theme, triggered with a few lines of javascript.
The negative part is regarding the RSS feed: I'm not sure it will follow along. Readers who subscribed might need to do it again to get the next updates - my apologies for this hiccup.