Adding the Android Look and Feel

- How To Install Windows Server 2012 On VirtualBox
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire
9/27/2010 5:27:27 PM
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.

Warning: 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 linearradial), 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. or

Tip: You cannot reverse the horizontal and vertical portions of the four gradient start and stop point constants (i.e., left top, left bottom, right top, or right bottom). In other words, top left, bottom left, top right, and bottom right are invalid values.

The next step is to add the traditional rounded corners to the navigation menus:

#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;

As you can see, we’re using corner-specific versions of the -webkit-border-radius property to apply an 8-pixel radius to both the top two corners of the first list item and the bottom two corners of the last list item (Figure 1).

It would be cool if you could just apply the border radius to the enclosing ul, but it doesn’t work. If you try it you’ll see that the square corners of the child list items will overflow the rounded corners of the ul, thereby negating the effect.

Technically, we could achieve the rounded list effect by applying the radius corners to the ul, if we set the background color of the ul to white and set the background of its child elements to transparent. However, when users click the first or last items in the list, the tap highlight will show up squared-off and it looks terrible. Your best bet is to apply the rounding to the a tags themselves as I’ve demonstrated here.

Figure 1. Gradients, text shadows, and rounded corners start to transform your web page into a native-looking Android app

Warning: The occurrences of :first-child and :last-child above are called pseudoclasses. Pseudoclasses are a special type of CSS selector that allow you to target elements that meet certain implicit contextual criteria. In other words, you can style things based on characteristics—such as where they are in a list, whether they have cursor focus, or if they have been clicked—without having to manually update your markup. For example, li:first-child will select the first li that is the child of its ul parent. Without the code pseudoclass, we’d have to manually add a class to the first li to let the browser know that it was the first one.