CSS3 is not part of the HTML5 specification, but it is an integral part of writing HTML5 applications. CSS3 is being developed in tandem with HTML5 and provides many new styles to make web pages look and function better than ever. Things that were once the realm of Photoshop, such as gradients and shadows, are now easily added via styling. Using these new graphics features will make your applications look modern and add character to your applications.

Some of the most exciting additions to CSS are the ability to add gradients and shadows to elements. Rounded corners, a feature that everyone wanted in their web pages, and which were once the realm of many HTML hacks, are now simple to add. It has never been easier to make web pages and applications look good without having to download extra images and code to support them.

You can see examples of all the following CSS3 styles in chapter2/css3-examples/css3-examples.html.

The first CSS3 effect that we'll look at is rounded corners, since that was such a sought-after feature before CSS3. In the past, if you wanted rounded corners, there were only a few non-optimal solutions available. You could load four images, one for each corner, and add some extra markup to get them to line up (and try to make it work in all browsers). Or implement some kind of hack using multiple div tags to "draw" a rounded border. Or one of a half a dozen other ways. In the end none of them were great solutions. So why did we go to such lengths to make rounded corners work before CSS3? Because people are attracted to them and they just seem to make your design look more natural.

Rounded corners are ridiculously easy to add to elements using CSS3's new border-radius property. If you want each corner to have the same border radius, just give it one value, like this:

border-radius: 0.5em;

If you want to set each corner of the border to a different radius, you can do that too...

Adding shadows to elements and text is simple in CSS3. Use shadows to make certain elements really stand out and give a more natural look to your UI. There are many options for adding shadows, such as size, position, and color. Shadows don't always have to be behind elements and text; they can frame, highlight, and add effects to them too.

box-shadow: h-offset v-offset blur-radius spread-radius color;

Let's put the border-radius and box-shadow effects to good use in our task list application. First, we will center the task list on the page. Then we'll put a box around each task with rounded corners and a shadow. Let's open taskAtHand.css and make some changes. You can find the code for this section in chapter2/example2.1.

First, we'll change the style for the <div id="main"> element which contains the task-name text field and task list. Let's give this section a minimum width of 9em and a maximum width of 25em. We don't want the task list to get too wide or too small to make it easier to read. This will give us the beginnings of a reactive layout. We will also set the top and bottom margins to 1em, and the left and right margins to auto to center it on the page.

There are a number of new styles for setting the background styles of elements. You can now easily draw gradients without using images. You can change the size and origin of background images, and even use multiple images in backgrounds.

Gradients draw a background for an element that fades from one color to one or more other colors. They give depth to your pages and add a more natural look. You can specify two different types of gradients in CSS3: linear and radial. Linear gradients are, well, linear. They flow from one color to another in a straight line. Radial gradients spread out from a central point in a radial fashion.

background...

Let's use what we learned about gradients and background images to make our application look more interesting. First, we'll add a gradient to the background of our task list application. We will add a linear gradient to the <div id="app"> element. It will start with our previous background color at the top and fade into a dark blue color at the bottom. Notice how we keep the old background color as a fallback for browsers that don't support gradients:

#app
{
    margin: 4px;
    background-color: #bbc;
    background: -webkit-linear-gradient(top, #bbc, #558);
    background: -moz-linear-gradient(top, #bbc, #558);
    background: -ms-linear-gradient(top, #bbc, #558);
    background: linear-gradient(top, #bbc, #558);
}

This is how it would look:

Now let's use CSS sprites to add images to the buttons in our task list application. We need images for delete, move up, and move down. Our buttons will be 16x16 pixels, so our images will need...

We have a pretty good looking UI now, but we can make it even better with some transitions. CSS3 transitions add animation effects to elements when their styles change. For example, if we change the size of an element, it will gradually change from smaller size to a larger size thereby providing visual feedback to the user. When things change gradually, it catches our eye more than something that just appears suddenly on the page.

The CSS3 transition property allows us to specify transitions on elements. It has the following format:

transition: property duration timing-function delay

Here is an explanation of the parameters:

CSS3 transforms provide even more sophisticated effects. There are 2D and 3D transformations available. We will discuss some of the 2D transformations here. Transforms can be used with transitions to provide some interesting effects. Here is the basic form of the transform property:

transform: function();

There are a few different 2D transform functions. The first we'll look at is translate(). It moves an element from its current position to a new position. It takes x and y positions as parameters. You can use negative values to move up and to the left. The following would move an element 10 pixels right and 25 pixels up:

transform: translate(10px, -25px);

The rotate() function rotates an element by a given amount. The rotation amount can be specified in degrees or radians. Use negative values to rotate counter clockwise, positive for clockwise:

transform: rotate(45deg);

The scale() function adjusts the size of an element by some factor. It takes one or two parameters. If only one...