Building Android Apps with HTML, CSS, and JavaScript, 2nd Edition

Adding the Android Look and Feel

Time to get a little fancier. Starting from the top of the page, add a 1-pixel white drop shadow to the header text and a CSS gradient to the background:

#header h1 a {
    text-shadow: 0px 1px 1px #fff;
    background-image: -webkit-gradient(linear, left top, left bottom, 
                                       from(#ccc), to(#999));
}

In the text-shadow declaration, the parameters from left to right are: horizontal offset, vertical offset, blur, and color. Most of the time, you’ll be applying the exact values shown here to your text because that’s what usually looks good on Android, but it is fun to experiment with text-shadow because it can add a subtle but sophisticated touch to your design.

Caution

On most browsers, it’s fine to specify a blur radius of 0px. However, Android requires you to specify a blur radius of at least 1px. If you specify a blur of 0, the text shadow will not show up on Android devices.

The -webkit-gradient line deserves special attention. It’s an instruction to the browser to generate a gradient image on the fly. Therefore, you can use a CSS gradient anywhere you would normally specify a url() (e.g., background image, list style image). The parameters from left to right are as follows: the gradient type (can be linear or radial), the starting point of the gradient (can be left top, left bottom, right top, or right bottom), the end point of the gradient, the starting color, and the ending color.

Tip

You cannot reverse the horizontal and vertical portions of the four gradient ...