How We Created Customizable Themes with CSS3

George Penston
Director of User Experience

As part of Widgetbox's new staff series—we'll be bringing you occasional guest posts from members of the Widgetbox team.

We recently released a new product that allows you to quickly build out a mobile site for your web site. These mobile sites are accessible on popular smartphones that use WebKit for the native Internet browser experience. iPhone, iPod touch, Android devices, and Palm Pre all use WebKit for their browsers and support all of these features to varying degrees. There were a bunch of great features available in WebKit’s implementation of CSS3 that we made use of but there were two standout features I really wanted to highlight here. First, we wanted to create a tab menu button with icons much like the ones found on the iPhone. But since we also wanted to make it possible to customize the look of your mobile site, we wanted to find a way to make the icons flexible enough to adapt to customizable colors. We accomplished this by taking advantage of the -webkit-mask-box-image property. With this, we were able to create simple black and white icons that then were used as masks for the button. These masks work much like masks do in Adobe Photoshop or Flash. Not only did it allow us to let a custom color be used for the icons, the selected state was easy to achieve by just changing out the background to a gradient. So this simple icon: Is nicely transformed to this: And then almost easily switched over to a selected: All this was accomplished with a couple of lines of CSS: .tabmenu .feed a div -webkit-mask-box-image: url(assets/tabicn-feed.png); } .tabmenu a:active div, .tabmenu a.enabled div background: -webkit-gradient(linear, 38% 0%, 60% 70%, from(#dde9f0), to(#3fc5f8), color-stop(.6,#79b2ec),color-stop(.7,#2e91e5)); } This would normally require several CSS sprites to be built to get even close to what’s going on here, but with that said, it would be next to impossible to allow for total control of coloring of the button icons and the button bar the icons are within. The other CSS3 properties that really went a long way for us to allow for custom colors in our themes is a clever mix of -webkit-gradient along with RGBA attributes. These two combined allowed us to recreate glossy button bars that are semi-transparent without using any image sprites whatsoever. Why go to all the effort of not using a semi-transparent PNG image sprite to achieve a gloss effect? We were building a mobile product so every image download was carefully considered. Reducing the amount of HTTP requests going back and forth between the mobile site would help to keep the site as fast as possible. Creating our tab bars completely with CSS3 style rules made this possible as well as providing the capability to choose a custom color to apply to a theme. We created two themes (Poly Vinyl and Frosted Glass) out of our six initial themes that can be customized further by choosing a theme color. So anyone building a mobile site could choose a color that matched their site or brand. Being a UX designer who has designed and developed for a variety of browser capabilities through the years, it’s hard not to get excited about designing solely for WebKit-based browsers (both desktop and mobile). The modern features offered in Safari, Mobile Safari, and Chrome bring web and user experience design closer to a true application development workflow. If you’re a web or UX designer, you owe it to yourself to set aside some time or find a project to really explore these new world capabilities. It truly is remarkable. For more on the CSS3 visual effects mentioned, visit Apple’s Safari Dev Center (login required): Masks, Gradients Also, be sure to check out this cool technology in action out in the Widgetbox Mobile Site Builder. You can try it out for free here: http://www.widgetbox.com/mobile/make/.

—When George isn't writing his next book on Photoshop, he's living where the playas play (with his wife and kids of course).

Click to read more ...