Over the last few weeks I’ve shared links to several small libraries, all of which have a coincidental theme running through them: they’re all simple ways to enhance usability by taking advantage of modern or cutting-edge browser capabilities. I wanted to elaborate on some of them here and talk about why I think they’re especially relevant to anyone building consumer-facing interfaces.
Creating iOS 7 effects with CSS3: translucency and transparency is a thorough look at how to use opacity and CSS filter effects to build the iOS control center widget, (the new panel that appears when you swipe up from the bottom of a device running iOS7). If you liked my post about using blur filters to recreate an effect from the Yahoo! weather app, this is a great next step to really deep-dive on using translucency and other filters to improve usability and delight people, all with CSS. Filters still have some issues, notably a lack of broad desktop browser support and sub-60fps performance when animating. But despite those limitations they can be an exceptionally useful tool when used correctly and sparingly.
Nifty Modal Window Effects, (direct demo link). While modal dialogs might sound a bit dull and outdated, sometimes you can’t avoid interrupting a user. If you have to do it, you might as well have the visuals look clean, modern and perform beautifully. The demo shows how far we’ve come since the original jQuery UI dialog styles.
Magic CSS3 framework is an overly general name for some specific CSS-only code to help you build complex appear/disappear animations. While some of the effects are a little over-the-top, others are a really nice evolution of the classic fade-in/fade-out effects that have been with us for years. They all make use of native CSS transitions and so the effects are super-slick thanks to browser hardware acceleration support.
CSS Background Blend Modes Now Available describes how you can use Chrome Canary to try out features in the draft CSS3 Compositing and Blending spec. This might initially sound too early to be useful, as it’s even less supported that the Filter Effects spec. However, it gives us a great insight into the low-level tools we’ll be using in the future: this is exactly the kind of technology that will allow web developers to create UI innovations like we’re seeing on the iOS7 lock screen. Blend Modes should bring Photoshop-like layer effects to the web. We’ll be able to use shapes blended with content like background images as the very basis of future UI widgets.
Unsurprisingly, the last couple of weeks have surfaced a lot of iOS7- inspired work as everyone gets a handle on the virtues of some of its key design philosophies. Has iOS7 inspired you to try any new CSS3 specs or libraries? Let me know in the comments below.
Follow @LeeMallabone to follow my posts about front-end development; tools, tips and cutting-edge UI hacks.
