More iPhone!

As a follow-up to "iPhones, the Web, and Dashcode, Oh My!", it is possible to mimic the look and feel of a native app/Dashcode-generated web app without using Dashcode. There are several WebKit-specific CSS stylings that will generate native-like gradients, rounded corners, etc. My favorite (because I like shiny stuff) is -webkit-gradient, which allows you to have a light color gradate to a dark color without having to create a separate image in another program and load it in. Here's the correct syntax for the gradient:

background-image: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999));

Explanation from left to right. background-image is the CSS property for, well, displaying a background image. Instead of specifying a URL as a value, though, in this case we're specifying a -webkit-gradient. The gradient requires several values:

1. Type of gradient. There are two types: linear and radial. Linear gradates in a straight line from Point A to Point B. Radial gradates in a circle from a specified point for a specified radius. An example of the two types is at webkit.org (only viewable on a WebKit-based browser like Safari or Chrome).
   
2. One or more points. Point values accepted are coordinates, percentages, or the keywords "left", "right", "top", and "bottom".
3. Starting color. Colors can be specified in hex values or RGBA (red, green, blue, alpha).
4. Finishing color. Colors can be specified in hex values or RGBA (red, green, blue, alpha).
   

Moving on to rounded corners. This is slightly more annoying to code. Each corner must be coded separately. Assuming the rounded corners are being applied to a list, the code to generate rounded corners is as follows:

#header ul li:first-child a {
  -webkit-border-top-left-radius: 8px;
  -webkit-border-top-right-radius: 8px;
}
#header ul li:last-child a {
  -webkit-border-bottom-left-radius: 8px;
  -webkit-border-bottom-right-radius: 8px;
}

In the first CSS declaration, the CSS code is looking for an anchor tag within the first instance of a list item within an unordered list within the header div. In the second declaration, the code is looking for an anchor tag within the last instance of a list item. The corner radius has to be applied to the first and last li tags separately, instead of applying it to the entire list, because if it's applied to the entire list the li's style will override the list's.

There are many more things you can do with JavaScript, Ajax, and CSS to approximate the feel of a native app on the iPhone. Check out Building iPhone Apps with HTML, CSS, and JavaScript to learn more.

Quote of the Day:
Jayne: Testing, testing. Captain, can you hear me?
Mal: I'm standing right here.
Jayne: You're coming through good and loud.
Mal: 'Cause I'm standing right here.
--Firefly, "The Train Job"