Time for action – styles in action

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.

#main
{
    max-width: 25em;
    min-width: 9em;
    margin: 1em auto;
}

We also want to change the task-name text input field to take up the entire width of the main section by setting its width property to 98%. This will give it a little wiggle room for the borders of the textbox; 100% will make it burst at the seams:

#task-name
{
    font-size: 1em;
    display: block;
    width: 98%;
}

Now let's work on the task-list items. We will give them a background color, rounded corners, and a shadow. We will make the shadow black and give it some transparency, so that the background color shows through. We will also set the position property to relative, so we can position the task buttons inside of it (see the next screenshot):

#task-list .task
{
    position: relative;
    list-style: none;
    padding: 0.25em;
    margin: 0.25em;
    background-color: beige;
    border-radius: 4px;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
}

Let's also add a border around the task buttons to group them, and move them over to the upper-right side of the task element using absolute positioning. We could also float it right here, but absolute positioning gives us more control:

#task-list .task .tools
{
    position: absolute;
    top: 0.25em;
    right: 0.25em;
    border: 1px solid black;
    border-radius: 2px;
}

What just happened?

If you look at the application in the browser, you will notice how much more natural our task list looks. The shadows really make the task items pop out from the page and give them depth. It makes them the stars of the application. By moving the task buttons over to the right out and of the way, we really make the task names stand out:

Resize your browser window and see how the list reacts. Here's the same layout resized smaller, like you might see on a phone or some other mobile device: