Posted in Css

Using background-image to replace text

Please note: The original technique (FIR) described in the body of this article is no longer recommended for use, as it makes the hidden text completely inaccessible for certain screen readers. Instead, see one of the alternative techniques mentioned at the end of the article under “Important Notes“.

This tutorial assumes a base-level knowledge of CSS, but not much more. Beyond that, it also assumes care will be taken to use these methods fairly and responsibly with well-structured markup.


Do you still crave the typographic control of creating headlines and decorative type with images instead of pure HTML text? Even with all the options we have for styling text with CSS, sometimes there’s just nothing that beats the indulgence of opening up Adobe Photoshop, then setting type in your favorite font at just the right size, kerning, and tracking. You know if you save it as an image and place it on a webpage, anyone with an image-enabled browser will see your typographic mastery just as you intended. Right? continued

Web standards need not be ugly

Who said creating type with images was bad? I say, fooey!

As I’ve been nursing a wicked sinus infection for the past week — often flat on my back in bed, trying to get healthy again for SXSW — I haven’t been able to get much client work done. As a result, I’ve had extra time to work through a few ideas and experiments I wouldn’t have finished otherwise. The frame spacing test from earlier this week was one of them. continued

To admire, study, and critique

Two noteworthy XHTML/CSS redesigns have recently launched:

Macromedia – The good and bad wrapped into one. Good: Clean, airy, pleasing color combinations, fun imagery, classic Macromedia typography, aesthetic, and balance. Heavy use of Flash, but no excessive animation. Bad: The scary thing about this redesign is the source code of their home page (or should I say how little source code there is for their home page) and how reliant they are on one big umbrella .swf file. continued

Frame frustration

In general, I’ve avoided the use of frames in the last few years, and I usually recommend others do the same if possible. In fact, I haven’t worked on a frame-based site since we stopped updating Cocktail many years ago. They often require additional maintenance and file management. And should normally exist alongside <noframes> content for browsers lacking support for frames. continued

A new edge

Been wanting another shiny new example of tableless design that pushes CSS and web standards to their limits and doesn’t look back? Not just another personal site or weblog, but a good-size content site from a well-known company? We get a big fix with the redesign of Netscape DevEdge. Not sure how much traffic DevEdge gets, but Eric Meyer and team at Netscape deserve a lot of praise for pushing a high-profile developer-centric site to showcase advanced web standards usage. continued


The second informal gathering in San Francisco, similar to the first one we pulled together last December, is happening this week. Rather than rephrase what he’s already written, I’ll just crib Tantek Çelik’s explanation and place it here:

Douglas Bowman [that’s me] and I [that’s Tantek] will be holding the second irregular early evening get together to chat about web stuff, semantics, structure, style this Tuesday, February 4th, from 6 to 8pm. What with the recent drama about XHTML2, nearly everyone restyling their blogs, and other recent events, there will be no shortage of topics.

Location: a friend’s house in the Mission district. Send one of us a message for details. list

Dave Winer asks:

A question for CSS design gurus. What’s the best you can do with a table that has three columns like the one on Weblogs.Com. Let’s see an example. I’d like the page to look good and load fast. Postscript: No one seems to understand — I want to do without a table. Column 1 is the number, column 2 is the name of the weblog. Column 3 is the time it last updated. Look at the page.

Hmmm. CSS design gurus. More lists. Ok, should be easy. (So I thought.) I haven’t contributed to any “markovers” yet, and this one seems like a simple enough challenge. There’s gotta be a way to do this one. Let’s take it on. continued

Go Dutch

I’ve always loved the pure design and typography from the Netherlands. Filled with a balance of beautiful form and practical function, and wonderfully obvious information hierarchy, Dutch design always evokes an emotional reaction within me. Granted, my personality slants heavily toward organization, logic, and simplicity. But I’m so often amazed at how the Dutch can seamlessly combine order of information with an individual expression unique to every design and designer. Much of my influence comes directly from Dutch design. continued

Upgrade messages

Via Clagnut a few days ago, Richard Rutter summarized some interesting observations and conclusions on the “Upgrade now!” message often seen in the unstyled version of CSS-based designs. Contrary to the current snafu with browser detection scripts over at HotBot, Wired News relies on support of specific CSS methods to hide or display any messages regarding browser capability. View Wired News in a browser such as Netscape 4.x and — as of December 18, 2002 — you’ll see this message at the top of the front door: continued