Are you afraid of shadows?
Have you ever wondered how iTunes manages all those cool effects with the iPhone App images? The neat text shadows and box shadows for images, the curved corners… I thought it was something they were using an image tool for, but the more I looked at the feeds, the more I noticed that the the feeds were just that, straight text with not a lot of graphics. Yes, the app image is an image, and yes they are manipulating it, but does it surprise you to know that they are simply using CSS3 effects that are available in WebKit?
I was going through styles at the end of my work day today because our pages just look so bland. I was looking for easy ways to spice it up, even just a little. I started playing with shadows, and instantly fell in love. I made the title of the page look like it was popping out of the screen, and the boxes appear above the page. These were VERY cool effects, but they would only be available to webkit browsers – Safari on Windows and OSX, and on the iPhone and iPod Touch – pretty much anywhere if I understand the documentation correctly.
And that’s when it hit me. Isn’t Google’s Chrome web browser based on WebKit too? So I open it up to the page I was testing and wow! My shadows all worked wonderfully!
I was upset because I know FireFox 3 does not support shadows, but then found a reference to FireFox 3.1a saying that this will be the first version that allows for the shadows. About time I say!
But here we are, supporting an 8 year old browser which will never support these cool effects. I even looked to see if IE8 will show the text shadowing, and even though it’s in RC1, it does not support text shadowing. Maybe that’s why there’s word on the street that IE8 will possibly be the last version – which I’m sure only means for the engine, which is already out dated before launch since it does not support many of the visual effects that WebKit does, which really amounts to the coolest browsing with the least overhead.
With any luck, the tide will turn, and we will be able to produce more and more rich web applications, with eye-popping effects by simply using CSS. Here’s to hoping!
