iPhone: Mimic Cocoa UIKit in Webkit

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.