How I Designed the Apple TV Now Playing Screen Using WebKit CSS3
I sat down in front of my Apple TV one night to listen to some music and I realized I could replicate the interface with awesome, awesome WebKit CSS3 properties. So I did.
Here is the Now Playing screen from the Apple TV Take 2. Personally, with the advent of iTunes LP, I would much rather see a visualizer while I play an album than this, now boring, interface. It was very cool when it was first released though. And it was a lot of fun to recreate the flip with webkit-transition.
What I Learned
I learned that CSS animation is only temporary, and will revert back. If you want a permanent change, use CSS transform. This is obvious in hindsight, just by thinking about the names. But in my excitement to experiment with them I did not take this into consideration.
-webkit-box-reflection is not currently supported on composited layers. The WebKit people know, too.
Download and Host Your Own
- Grab your favorite mp3 audio file. (Rename it “song.mp3”.)
- Grab your favorite album art from that album. (Rename it “image.png”.)
- Throw them in this folder and view through Safari 4.0.3 for best results.
View Demo | Download
Leave a Reply