CSS Quick Tutorials

If you already know what a style sheet is and how to link it to your page, and how to specify selectors, properties and units with CSS, then in some ways the rest is detail. But, there can be a lot of detail to learn. The following is our ongoing collection of tips, tricks and quick tutorials.
The rising tide
When I redesigned the Westciv site (some time ago now - how it flies!) I included a neat little effect on the top left corner logo which I like to call "The Rising Tide". Scroll up and down the page a bit now if you've never actually noticed it before.
(Not seeing anything in particular? I'm guessing you're using Internet Explorer on Windows. Because a vital aspect of CSS is not supported by this browser, the technique doesn't actually work here. However it does no harm either, so in the spirit of progressive enhancement I decided to use it anyway.)
I've always been surprised by the number of people who have written in asking how the effect on the logo works, and now I've finally got round to writing a little tutorial to spell it out. There are two parts to the technique. One is simply the scrolling effect, and the way the westciv logo can always be seen no matter how far you scroll down the page. And then there is the fact that this logo is a live link to the Westciv home page, available right there in the top left of the viewport, no matter how far down the page has been scrolled.

Followers