Using webkit in iPhone / iPod touch application development is a common practice. However, jumping from cocoa to webkit and back can be confusing to the user. Here are a couple of simple hints for theming webkit to look like Cocoa’s UIKit framework.
Specifically, what I am emulating here is a UITableView.
So here’s an example from one of our upcoming applications. We are using webkit here to give us additional flexibility. However, we wanted to maintain the Cocoa UIKit feel:
Background:
The iphone application gray/white striped background is ubiquitous. Feel free to steal it from here:
To repeat this background in webkit, use something like this:
body {background-image: url('iphone_back.png');background-repeat: repeat; -webkit-user-select: none; -webkit-text-size-adjust: none; margin: 0;}
Embossed Header Text:
The iphone frequently uses embossed header text on this gray stripped background. Using safari’s text-shadow, this is pretty easily replicated. I called this the header class. Wrap your text in a class with the following css:
.header {font-weight: bold; font-size: large; color: #4c566c; text-shadow: 0px 1.5px 0px white;}
Rounded Boxes
Of course, rounded boxes are everywhere in the iPhone GUI. Here I have called my divs curve. Safari’s -webkit-border-radius is a great tool for this. Here is an example of css that will provide this effect.
#curve {-webkit-border-radius: .5em;border: 1px solid gray;margin:5px; padding:5px 0px 5px 0px; background-color: #fff}
If there is interest, I’ll post more examples later. Please feel free to share your own in the comments below.
