Bringing Hyperlinks to Life with CSS
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Hyperlinks are what make the Web a web at all. Without them, we'd be forced to manually type in the address of every page we wanted to visit. We probably spend more of our time on the Web searching out the right links and interacting with them than we do anything else. But hyperlinks can be much more than simple text or graphics with the borders removed.
In the course of this article, we'll explore ways to creatively style hyperlinks, see how to base their styles on various link states, and investigate the use of half-screen effects to make image links look better than ever.
Goals
As part of site design for a cutting-edge energy-supply company, we need to create a compact interface to convey information about the three main types of energy sources used by the client: natural gas, nuclear power, and solar power. The name for this interface is "Energy Informant," a name supplied by the client. The client also insists that some links should look different than a normal text link. "The help-system and press-release links need to really stand out compared to other links," the client said, and the boss agreed.
Preparation
You can download the files for this article from http://www.ericmeyeroncss.com. If you're planning to play along at home, load the file ch04proj.html into the editing program of your choice. This is the file you'll be editing, saving, and reloading as the project progresses.