Sam Brown

#235 7th January 2008 at 1pm Article 5 Comments

This is a really clever technique that displays two different versions of your logo depending on how you are viewing it through the use of CSS. Via a browser the logo displays normally, if however you are printing the page or browsing without CSS enabled it can display an alternative version, a print friendly black on white version for instance.

Let me start of by saying that I can not take credit for this technique and while it is not anything revolutionary for a seasoned CSS veteran, I feel it is a method worthy of some exposure. Dan Cederholms SimpleBits was the source and inspiration for this quick tip article. I have yet to see this method used in many other places but it is definitely something I am going to look to incorporate into my future projects.

The 411

Firstly let’s have a look and see what is happening, if you take a look at simplebits.com you will see Dan’s SimpleBits logo, green and white on a slate blue background.

Taking a look at the Print Preview or by disabling CSS in your browser you will now see a grayscale logo on a white background. This is achieved by some pretty simple HTML and CSS, let me explain it further.

The HTML

1. <div id="logo">
2. <span><img src="/img/1206/logo-bw.gif" alt="SimpleBits" /></span>
3. </div>
4. Download this code: /code/sb-html.txt

The HTML could not be any easier, the black and white version of the logo is wrapped in a span tag which is encased in the logo div. Take note of that extra span tag, this is key.

The CSS

1. #logo span {
2. display: block;
3. width: 191px;
4. height: 55px;
5. padding: 0;
6. border-style: none;
7. background: url(../img/1206/logo-whitney.gif) no-repeat;
8. }
9. #logo img {
10. display: block;
11. width: 0;
12. }
13. Download this code: /code/sb-css.txt

Now we can see that the black and white version of the image is hidden with the #logo img rule, and the proper full colour version of the logo is put in its place via the #logo span rule.

This is where that extra span tag comes in, it is given a width and height, is set to be a block level element and the colour version of the logo is specified as the background to the tag.

Essentially what is happening is that the image is being hidden inside the span tag through the use of width: 0;, the span is then given a background and size, and because it is now a block level element the original colour logo is displayed.

Note, I have truncated Dan’s CSS slightly to make it easier to explain. Dan does go on to wrap the logo in an a tag on sub-pages that then links the logo back to the homepage.

That is it, real simple, real elegant and really useful!

Not revolutionary but very useful

Don’t get me wrong, this is nothing new and I fully appreciate that. I do think though, that this is a very easy and useful way of displaying different logos for different needs. There are other ways to accomplish this great feat but this method is one of the cleanest and safest to use.

Dan writes great books!

Dan Cederholm is not only a cool guy, he also writes very useful books! I own both of his publications, you should too!

• Bulletproof Web Design New Riders, 2007

• Web Standards Solutions Friends of ED, 2004