Those of you that follow my twitter feed will know that I have been a little displeased with the fact that iLife 11 didn’t get a new (or even updated) version of iWeb. Apple seem to be wanting to lead the way when it comes to browsers, but doesn’t seem to want to produce a web design app to back it up.
Moaning aside, one thing that I would have expected to see in a new version of iWeb is the use of CSS3, the latest version of ‘Cascading Style Sheets’ that allows you to arrange and design a web page how you want to. CSS3 allows us to do much more than layouts however, and in this tutorial I want to show you how you can add great looking buttons to your iWeb site using just CSS3 – no images.
So what are the benefits of using CSS3 to create buttons for an iWeb site (or indeed any web-site)?
They are easily customizable, just by changing a few color codes or font-names a new button can be applied.
Each button comes in three states; normal, hover and active
In case a visitor to your site has a none CSS3 browser they still work; just without the shadow or gradient.
So how do we do it? An HTML Snippet is all we need!
Below you will see the code I used to get the orange button in the image above. All I did to get the other buttons is change the color codes for the backgrounds and fonts.
Everything highlighted in red can be changed to give the buttons a different look. It would take far too long to explain all of the different methods so I have found a few CSS3 related sites that explain it far better than I ever could. The links can be found at the bottom of the page.
Here’s a quicker breakdown of the code. The first line tells the users browser that the CSS for the button is included on the page (rather than it being linked to another page), and the second just sets the name of the CSS3 class for the button.
Lines 3, 4 and 5 set the border radius for different browsers to understand, for example, by increasing this figure the rounded corners will increase.
Lines 6, 7 and 8 apply a slight shadow to the button to give it a bit of depth.
Lines 9, 10 and 11 set the background color of the button; the first is for IE, the second for Firefox and line 11 for Safari.
The remainder of the lines are for font settings and its position within the button.
Moving on to the ‘hover state’ all that has happened is that the gradient has changed slightly to allow the button to look as if it has been pressed slightly.
And finally the ‘active state” changes the colors once again but also applies a little 1 pixel nudge to the button so it really does look pressed.
The very last line is the button itself. Obviously you need a link for the button to go to and of course some ‘Button Text’ to appear on the button too.
All of the code is pasted into an HTML Snippet then press ‘Apply’. You may find (as I did) that the Snippet border may close in around the button, but this can be dragged out using the handles.
In order to see the full effects of your button you will need to publish your site to a local folder and then open it in Safari; you can spend hours, just like I did this last weekend, experimenting with colors, moving the shadows or changing the fonts to match your site. the effects can be amazing.
And that is all there is to it. I agree that it may look like a lot of code for one button, but HTML Snippets can be copy/pasted so once you have one completed taking your site forward with CSS3 will be easy.
Are you going to use CSS3 on your iWeb site? Do you think CSS3 should be included in the next version of iWeb? Leave us a comment and let us know; and don’t forget to check out the CSS links above.