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
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
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!
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
