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.
