WPDFD Issue #56 - November 01, 2002

Box of Tricks

Last month's article demonstrated some basic layout techniques based on the CSS box. This time, we'll try something a little more daring, but not difficult – using CSS for rollovers. Most designers use JavaScript for rollover effects, either from an 'action' feature in their Web page editor or from a hand-coded script. Basically, the script just says; when the mouse is over this image, swap it for another one.

Multi-colored links

I'll just show the top, .home class to show how it's done, the others only differ in the 'color' spec. .home a:link       {       color:#06f;       background-color:transparent;       text-decoration:none       } .home a:visited       {       color:#06f;       background-color:transparent;       text-decoration:none       } .home a:hover      {       color:gray;       background-color:transparent;       text-decoration:none       } As this is a main menu and used often, the 'visited' state is not very relevant so I have made the a:visited and a:link colors the same.

CSS buttons

Using the 'border' attributes of a CSS box, you can outline a box in another colour but as you can address each of the four borders separately – top, right, bottom, left – pseudo 3D effects are very easy. Giving the top and left edges a 'highlight' colour and the bottom and right a 'shadow' colour makes the buttons seem to rise away from the background. Reverse the situation for the rollover state (or the 'active' state), and the buttons sink into the page.

CSS Image Rollovers 1

Where CSS-only buttons and navbars are great for keeping files sizes to a minimum, sometime we just need to use GIFs, (to be able to use different fonts, for instance). The boxes containing the GIFs have colored backgrounds in their normal state, but the :hover state changes the backgrounds to white. Naturally, the boxes' background colors are visible through the transparent parts of the GIF so the whole button seems to change color.

CSS Image Rollovers 2

CSS boxes can have background images and foreground images. Naturally, the foreground image obscures the background behind it but we can use this to advantage when combined with the image visibility property. The :hover state simply hides the foreground image leaving the background image visible. First, we make sure that link images have no border by explicitly stating; a img       {       border:none       } There are five buttons on the page but they all work in the same way.

To describe Adobe Photoshop Elements 2.0 as a cut-down version of Photoshop would be missing the point somewhat. Where it's true that it does share a great many of the same features, and underlying code too no doubt, Elements is aimed at a completely different market. The program may be similar, but it is packaged completely differently. Photoshop, with its fairly steep learning curve and price will do just about anything that a graphics professional could want – with a bit of coaxing.

Fringe Benefits

Anti-aliasing has to gradate between the foreground (text) color and the background behind it or it will have a nasty 'halo'. In this instant, the text is crossing two slightly different backgrounds so they have to be combined into one composite image. I made a rectangular selection containing the text and its two backgrounds and 'copy merged' it into a new document. What I wanted was just the text on a transparent background but with an anti-aliased fringe derived from the background layers.