WebKitBits

RSS Twitter

CSS HTML5 Video Canvas Preview Resource Tutorial UI

A tumblog about the browser engine built into Safari, Chrome, iPhone, Palm Pre, and Android.

Written by David Kaneda, Creative Director at Sencha. Submissions welcome.

Sponsor WebKitBits!

Latest from @WebKitBits:

Shop at Amazon.com and support WebKitBits

Customizable Themes with CSS3 and -webkit-mask

We recently released a new product that allows you to quickly build out a mobile site for your web site. There were a bunch of great features available in WebKit’s implementation of CSS3 but there were two standout features I really wanted to cover.

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, I 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, I was 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 Photoshop or Flash. Not only did it allow us to let a custom color to 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 or a 2-up CSS sprite 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 or 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 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. I created two themes out of our six initial themes that could be customized further by choosing a theme color. So anyone building a mobile site could choose a color that matched their 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 for 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):

Also, if you’re interested in checking out the Widgetbox Mobile Site Builder, you can try it out for free here:http://www.widgetbox.com/mobile/make/.

Have your own awesome WebKit tutorial? Submit it!

css css3 mask ui tutorial submission