Toning down drop shadows in Firefox 3.5

One of the new additions to Firefox 3.5 is support for the CSS3 “text-shadow” rule as a means to add drop shadows to text. Ideally this would be used to add subtle shadows and glowing halos – but like any presentation tool it’s open to abuse (think <blink> and Powerpoint).

After upgrading to Firefox 3.5 I immediately noticed that headings on planet.ubuntu.com were a lot less clear and a lot more distracting than they were before. Particularly egregious are those entries with a number of headings and sub-headings in rapid succession – such as this one (click for the full size version):

Too much drop shadow can be distracting
Too much drop shadow can be distracting

Personally I find that much drop shadow to be offputting and confusing – and it certainly distracts from the content. In this case a potentially useful and informative post is lost amongst a sea of gaussian blurs.

This is the bit of CSS that’s responsible:

h1, h2, h3, h4, h5, h6 {
  background-color:transparent;
  color:#6D4C07;
  font-family:Verdana,arial,helvetica,sans-serif;
  font-size:100%;
  font-weight:normal;
  margin:0;
  padding-top:0.4em;
  text-shadow:0.2em 0.2em 3px #999999;
}

There are, to my mind, a couple of problems with the text-shadow line. Firstly the offset (0.2em 0.2em) is a bit too big – 0.1em gives a “softer” look. Secondly the shadow is a bit too dark – #999999 (or just #999 for short), whereas I prefer something more subtle, such as #aaa (a bit more subtle) or #ccc (a lot more subtle).

In order to fix this you need to edit your userContent.css file – or more probably create it in the first place. There are also various extensions which let you apply your own rules to the CSS on a given site, but this is the approach I prefer to take, as it doesn’t involve adding a new extension just to fix a single site – but if you want to change the styling of several sites, an extension might be the way to go. For everyone else, back to the userContent.css file – you can find out how to create this file here.

Once you’ve created a userContent.css file, you need to put some CSS into it. In this case I want to limit the rule to only apply to sites in the planet.ubuntu.com domain, using a mozilla-specific CSS extension, @-moz-document. The rule itself is just a variation on the normal rule to reduce the spacing and the darkness of the shadow – plus the !important keyword to ensure that it will override the default stylesheet. In other words, for the copy and pasters reading this, I added the following chunk of CSS to the bottom of my userContent.css file:

@-moz-document domain(planet.ubuntu.com)
{
  h1, h2, h3, h4, h5, h6 {
    text-shadow:0.1em 0.1em 3px #ccc !important;
  }
}

The result of this hackery – after you’ve restarted Firefox – is a subtler collection of drop shadows:

That's better
That's better

If you don’t like drop shadows at all, you might prefer to switch them off entirely:

@-moz-document domain(planet.ubuntu.com)
{
  h1, h2, h3, h4, h5, h6 {
    text-shadow: none !important;
  }
}
Look Ma, no shadows!
Look Ma, no shadows!

Or perhaps you would like subtle drop shadows on the most important titles, but none at all on the deeper levels of subtitles:

@-moz-document domain(planet.ubuntu.com)
{
  h1, h2 {
    text-shadow:0.1em 0.1em 3px #ccc !important;
  }

  h3, h4, h5, h6 {
    text-shadow: none !important;
  }
}
The best of both worlds
The best of both worlds

Leave a Reply

Your email address will not be published. Required fields are marked *