5 Days of HTML5 (Day 3: HTML5ing Up Our Site)

Day 3 and I’ve finished most of the CSS to the site. Heres how its looking so far…

Believe it or not, the only new things here are the new twitter widget, and a nice new background from a photoshoot I had the other day. The rest; rounded corners and drop shadows on the buttons and images are all done in CSS3.

Lets have a quick look at how thats done by looking at how my stylesheet treats an image when its enclosed within an <article> tag:

article img {
        position:static;
        border:1px solid #FFFFFF;
        box-shadow: 7px 7px 5px #111;
        -moz-box-shadow: 7px 7px 5px #111;
        -webkit-box-shadow: 7px 7px 5px #111;
        border-radius:10px;
        -moz-border-radius:10px;
        -webkit-border-radius:10px;
        }

One thing worth noting is the duplication of border-radius and box-shadow, one instance as a general declaration, one with a -moz- prefix for Mozilla browsers and one with a -webkit- prefix for Webkit browsers like Chrome and Safari.

Unfortunately at this stage this is necessary to cover all bases. Maybe later we’ll see the decay of prefixes and be able to use just one line to achieve CSS3 stylings in all browsers.

But all in all its pretty simple, I’m addressing the article element by starting with ‘article’, then all ‘img’s in that article, then I open my CSS and place in the rules. If you’re using Dreamweaver CS5 or higher you can implement these nice tricks right away.

Because of these CSS3 features we can do away with excessive amounts of graphics on a page and start moving towards native support in favour of good design.

Lets take a look at that purple background of my article blocks:

article {
    background-image:url(../images/blockbackground.png);
    border:1px solid #444444;
    border-radius:40px;
    -moz-border-radius:40px;
    -webkit-border-radius:40px;
    padding: 40px;
    position:relative;
    }

In CSS2, to achieve that transparent look we had to use transparent png’s such as the ‘../images/blockbackground.png’ seen here. In CSS3 we can do away with this thanks to the introduction of the RGBA property.

We can set a background colour;

and drop down the opacity with the alpha property to match our previous background colour;

All done by replacing this:

background-image:url(../images/blockbackground.png);

With this:

background: rgba(106,0,106,0.2);

In all, shorter CSS, and less images to load makes for a more fluid and organised site. These are just a couple of the new features of CSS3 and a basic introduction to how to get started with box shadows, rgba, and rounded corners in CSS3.

Another nice short post today, but I’m going to finish off my CSS and work on something epic. Tomorrow we’ll talk about what everyone’s been ranting and raving about; the canvas element, and how we can integrate it to our site for interactivity and native drawing.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s