scriptygoddess

02 Apr, 2004

CSS: Swamp text for images

Posted by: Jennifer In: Bookmarks

So, I'm checking out CSS Zen Garden – I'm now using firefox because of all the cool extensions it has specifically the PNH Toolbar which lets outlines the blocks (ie. grids) on the page, as well as this one: Edit CSS which lets you see and EDIT the current page's CSS and redisplays your changes in real time. (mentioned in the comments of this post, by Andrew Dupont) (THANK YOU for those!!!)

In doing so, I was examining the first Zen Garden page's CSS which uses this trick to swap images instead of text. That is just so cool. (I know, all you CSS-freaks have probably known about that little trick for eons.)

8 Responses to "CSS: Swamp text for images"

1 | dez

April 2nd, 2004 at 10:41 am

Avatar

Just a note to take heed of the Note that preceeds Doug's article and to check out the Important Notes at the end of the article. In particular see Joe Clark's ALA article about the acessiblity issues associated with this method (referenced in the notes).

As such at the recent SXSW, Doug "officially deprecated" the original method becasue the use of display:none to hide text prevents it from being read aloud in certain screen readers.

A host of alternative methods can be found here:
http://www.mezzoblue.com/tests/revised-image-replacement/

2 | Chris Pederick

April 2nd, 2004 at 12:53 pm

Avatar

You may also want to check out the Web Developer extension…

Cheers,
Chris

3 | Jennifer

April 2nd, 2004 at 1:29 pm

Avatar

dez – actually (if I remember correctly) the method actually used in that first zen garden design WAS different than what that article said to do… (it didn't use that display:none;) – however it still credited that article for the tip.

4 | Jennifer

April 2nd, 2004 at 1:31 pm

Avatar

actually – that's not right… I didn't see it at first – but now I see the "span" under h1 which has the display set to none.

5 | Jukka-Pekka Keisala

April 5th, 2004 at 8:50 am

Avatar

I have been using Web Developer extension. Do you know if this PNH toolbar is better?

6 | Jennifer

April 5th, 2004 at 8:56 am

Avatar

Actually now having played around with the web developer extension – I think it has the same things and more than the PNH toolbar. (unless I've missed something)

7 | testing new layouts

April 8th, 2004 at 10:18 am

Avatar

Welcome and Thanks!
Welcome to the new and improved Puppy Pile! (Yes, there are no puppies here, at least for now… But that's neither here nor there.) I've spent countless hours working on the layout and design for this page to give it…

8 | The Puppy Pile!

April 8th, 2004 at 12:42 pm

Avatar

Welcome and Thanks!
Welcome to the new and improved Puppy Pile! (Yes, there are no puppies here, at least for now… But that's neither here nor there.) I've spent countless hours working on the layout and design for this page to give it…

Featured Sponsors

Genesis Framework for WordPress

Advertise Here


  • Scott: Just moved changed the site URL as WP's installed in a subfolder. Cookie clearance worked for me. Thanks!
  • Stephen Lareau: Hi great blog thanks. Just thought I would add that it helps to put target = like this:1-800-555-1212 and
  • Cord Blomquist: Jennifer, you may want to check out tp2wp.com, a new service my company just launched that converts TypePad and Movable Type export files into WordPre

About


Advertisements