Jump to main navigation, main content

Archived entry | Matt Wilcox .net

2006 redesign - CSS techniques

Although the website functionality is still only half complete, the graphical look and the CSS is mostly finished, and I thought it would be an idea to document some of the CSS techniques I’ve used in this new design.

CSS hyperlink hover fade-in

This is a trick I had in my head for a number of months, but one that I could not get to work on any browser - until Firefox 1.5 appeared on the scene. If you hover over any non image-replaced hyperlink you should see a ‘fade in’ from the background tint to a full pink background with white text. The trick is very simple - I place an animated gif as the background image on hover:

  1. a { background : #eee; color : #ff0095; }
  2. a:hover { background : #ff0095 url(images/a.gif) 50% 50%; color : #fff; }

The gif itself is a 10 second animation - staying on a solid pink for most of that time. As most users don’t hover a link for that long, they won’t see it loop. Unfortunately Internet Explorer can’t seem to render the animation at the correct speed, so I have overwritten the a:hover rule in the screen_ie.css file1. In this way IE degrades gracefully by simply not showing the fade effect.
I should also point out that Mozilla based browsers are the only ones that treat the hover CSS rule as intended: by re-playing the gif from the first frame on each subsequent hover. Safari and Opera both loop the gif continually as a background process. This means that when you hover the link in those two browsers, rather than starting to play from the beginning of the animation, they just show the gif at whatever point in the animated cycle it’s currently running. There is no way to filter these sort-of-broken browsers from receiving the style, so instead I’ve left it in the stylesheet and simply hope that the browser vendors decide to implement their CSS/image-routines in a similar manner to Mozilla at some later date. Firefox makes up 60% of my visitors, Safari and Opera about 3%, so I didn’t feel too bad about leaving the effect in.

CSS rounded corner thumbnails

If you are using a modern browser (almost any browser that isn’t IE) take a look at any of the entries with attached photos. You will notice that the thumbnail has rounded corners, appears rotated slightly, and the shape changes on hover. This is an effect achieved purely through CSS. Just to save you a little time I’ve attached a self-portrait to this entry - look over to the right and you’ll see what I’m talking about. The thumbnails themselves however are square, perfectly straight, and have no rounded corners.

The method is simple - I place a transparent PNG image over the top of each thumbnail. That image is transparent in the middle, but has rounded corners the same colour as the main site background. What appears to be a rounded thumbnail is simply a little optical illusion. This trick will work as long as the thumbnails are always the same dimensions, so it is limited in scope - you can’t apply it to any old image.

Well, that’s the basis of the trick, this implementation is slightly different, as the thumbnails are also hyperlinks. I add the PNG to the anchor, rather than the thumbnail image itself. I also use CSS generated content to ‘attach’ the PNG, rather than adding any mark-up to the XHTML. While this means that IE doesn’t see the effect (because it doesn’t understand generated-content), I refuse to add meaningless mark-up simply so IE can achieve the intended look. Fortunately it degrades perfectly well, and IE gets plain old square thumbnails. Here’s the CSS I use (comments added for clarity):

  1. ul.photo a {
  2. float : left;
  3. margin : 0 10px 10px 0; padding : 0; }
  4. ul.photo a:focus {
  5. outline : 0; } /* stops Mozilla outlining the anchor */
  6. ul.photo a:after {
  7. content: url(images/thumbnail_mask.png); display: block; width: 75px; height: 75px; margin-top: -75px; }
  8. ul.photo a:hover:after,
  9. ul.photo a:focus:after {
  10. content: url(images/thumbnail_mask-2.png); }

As you can see, I load a completely new image on-hover. This was not my first choice method, but limitations in browser implementations of the required CSS meant I couldn’t use a ’single image, background-position-shift’ approach. I also couldn’t use positioning to place the PNG, as Mozilla based browsers do not support positioning on generated content. There are more limitations on generated content than I’d like. smiley icon: frown As a bit of a side track - it’s my opinion that CSS generated content should be stylable in exactly the same way as ‘real’ content. And ditto that for any and all form elements. Safari, I’m looking at you.

Comment numbering

If you see an entry with comments on it, you may notice that the comment number is a different size than the comment itself. As simple as this looks, it turned out to be a royal pain in the posterior to achieve. It also uses some ‘advanced’ CSS, by which I mean that it uses standard CSS 2/3, but properties that a few browsers don’t fully support yet (counters, mainly). You can, of course, assume that Internet Explorer doesn’t understand any of it, ignores all of it - and renders the numbers in bog-standard styling. Here’s the CSS:

  1. ol {
  2. margin-left : 30px; list-style-position : outside;
  3. counter-reset: item 0; }
  4. .entry .comments ol {
  5. clear : both;
  6. margin : -1em 0 1em 0;
  7. color : #848484; }
  9. ol.comment > li {
  10. display: block; margin-bottom : 3em; }
  11. ol.comment > li:before {
  12. content: counters(item, ”."); counter-increment: item 1;
  13. margin-right : .25em;
  14. font-size : 1.9em; }


  1. If you would like to know more about these files and how I organise my CSS please refer to the earlier entry: Organising CSS, revisited. back


skip to comment form
  1. GD posted 21min, 27sec after the entry and said:

    I thought thats how you did it.

  2. Matt Wilcox posted 40min, 18sec after the entry and said:

    @GD - smiley icon: laugh

  3. MWF posted 12 days, 12hrs, 27mins after the entry and said:

    On the subject of the hover fade-in could you not create a non-looping version of the animation and thus get round the 10 second loop issue?

  4. Matt Wilcox posted 12 days, 18hrs, 12mins after the entry and said:

    I know that it is possible to set browsers to play animations only once, but I'm not sure if you can control the looping in the GIF itself. I'll check it out next time I'm in Windows rather than Ubuntu. smiley icon: smile

  5. MWF posted 13 days, 11hrs, 48mins after the entry and said:

    Jimi, gif's can hold their own code to control how they play. You can set a gif not to loop smiley icon: smile Could work OK even in Safari and Opera as once they've played the full animation once they should just stop on the last frame and appear like usual background hover rollovers.

  6. Matt Wilcox posted 28 days, 15hrs, 43mins after the entry and said:

    UPDATE: Opera 9, out today, treats the CSS hover fade-in's correctly too, by re-playing the animation from the first frame on each roll-over. It's not perfect though, as it renders the animation at half speed for some reason.

Associated media


From the archives

Other enteries filed under:

Web Development

Site information

Built with valid XHTML and CSS, designed with web standards and accessibility in mind. Best viewed in a modern browser [Firefox, Safari, Opera]

This domain and all content is a copy of my old website, for historical purposes only.