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 file¹. 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. 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; }
8.  
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; }

Entry Information

Posted:

Mon, 22nd May 2006 at 22:05 UTC

Filed under:

• Web Development

Tags:

• css
• design
• web development
• web standards