HTML 5 – Create a Layout

I’m going to suggest that for this exercise, you start with last week’s work we already did on semantics. Start with that file and “save as” so you can have two separate files at the end — one with just the semantic work, and one with the layout.

Then I want you to create this layout, with links that look like buttons.

You’ll need the Buddy McCodeface logo, and the nifty binary background.

WTF, Mark?

Ah, you may have noticed a few more flourishes. Most of them really are cosmetic, do you can do regular boxes instead of the rounded kinds. However, if you want to play with some more advanced CSS (and you know you do), then here’s some help.

One of the great things about CSS3 is that it allows you to do even more subtle styling than before, such as rounded corners and drop shadows.

Rounded corners

You can now apply rounded corners to an element in HTML. This is done using the border-radius property. If you want the corners to look all the same, you only need to use one number for example:

Here’s a border all the way around.

This would be coded in CSS:

.bordersample2 {
border-radius: 25px;
background: #ddd;
color: #fff;
padding: 20px;
width: 200px;
height: 75px;
}

You can also do different corners. They go in the order: So if you wanted a bigger curve on the top right and bottom left, you’d do this:

Here’s a border with different sized edges

.bordersample {
border-radius: 15px 50px;
background: #dddddd;
color: #fff;
padding: 20px;
width: 200px;
height: 75px;
}

Order of values goes clockwise

According to the W3C:

• Four values: first value applies to top-left (or top side), second value applies to top-right (right side), third value applies to bottom-right (bottom), and fourth value applies to bottom-left corner (left)
• Three values: first value applies to top-left, second value applies to top-right and bottom-left, and third value applies to bottom-right
• Two values: first value applies to top-left and bottom-right corner, and the second value applies to top-right and bottom-left corner
• One value: all four corners are rounded equally

These are all short forms: The border-radius property is actually a shorthand property for the border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius properties.

Or, you could use this tool to help you write the code.

Drop Shadows

Drop shadows can be added to text or to elements that are boxes. You use the properties:

• box-shadow
• text-shadow

When doing simple shadows, you offset the shadow by a horizontal value first, and then a vertical value, then how much you want to blur or soften the shadow, followed by the shadow color:

.simpleblur {
text-shadow: 2px 2px 5px #444;
}

Simple shadow blur

If you want the shadow to go in another direction, you can offset using negative values

You can also combine these for interesting effects. Check out the W3C help page for more samples and an interactive tutorial.

You write the code in the same order for box-shadows (for when you want to put shadows behind design elements like a div or a nav, or in the case I’ve provided, the links in the nav).

And if you want the quick and dirty tools to help you write this code, you can find the box-shadow tool here and the text-shadow tool here.