bureau

It means “desk” or “work table” in french, and it’s a blog about interface design.Get the RSS feed.

i

I'm Thibaut Sailly, an independant interface designer based in Paris. Say hello on mastodon or by email at thibaut ✉ tsailly ◦ net.

Le Baby is an iOS app I made with Amadour Griffais, a shared and private memory helper for parents with newborns. View on the App Store.

Topics

Archives

© 2010-2023 Thibaut Sailly · Powered by Movable Type · RSS

CSS 360

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.

Tweet from @RWD about Herbie Hancock and breakpoints
This tweet from Ethan Marcotte motivated me to finally get to work.

Along the way I found out an interesting thing about Webkit and Gecko (Update: if I had looked closer to my code, I would have realized that this wasn't that much of an interest, see below). If you are viewing this page using a Webkit browser, you probably have a lot of flickering, like in old black and white movies, with the desks going up or down and being horribly sliced. Calling this an animation is a far stretch, you might think. This is not how I planed this idea to happen. Now, load this page in Firefox and see how it behaves now. Better. Simple and sharp, a nice 360.

What seems to happen in Webkit is a rendering of the transition between the states described in CSS contexts. Change the window's width very slowly to see it happen. I tried to replicate the behavior with a simpler background image and change its position between contexts, either with background-position or with margin, but the change was really snappy. I don't know what really triggers this transition rendering, so I will have to test more to find out. There's either an underlying design decision regarding this behavior, or it might just be a collateral effect of css transitions implementations.

If you have a clue about this, let's talk about it on twitter, and I'll publish feedbacks here as an update.

Update: well, it didn't take too long. @unsongeur found out that I had background in my -webkit-transition-property declaration for h1 a. Works great in Webkit now too. Off to a whisky and some sleep.

Posted in
« past present »