Anybody know how they do this?

See this site http://www.csszengarden.com/?cssfile=/185/185.css&page=0

You see the titles of each posts are like images made through regular code if you look at the code with out the style it is just a regular h1 but there is some sort of trick cause it is an image i dont get it how do they do this can some one point me somewhere where i can learn about this?

Thanks...

BTW Can someone tell me where I can learn to do stuff like they do on CSSZENGARDEN i love it, but I dont where to go and where can i go to learn how to use Photoshop...

 

Your HTML would look something like this...

<div id="SomeSection">
  <h1><span>Hello, World!</span></h1>
</div>

Code (markup):

And your CSS would look like this...

#SomeSection SPAN {
  display: none;  /* make the text disappear */
}

#SomeSection H1 {
  height: 123px; width: 456px;  /* dimensions if the image to put in */
  background-image: url("path/to/image");  /* the picture */
}

Code (markup):

As for learning, I have not actually found any site that teaches you to code in a way similar to how CSS Zen Garden was built. For the moment, you will simply have to learn by its example, and ask questions when you need to. It is indeed an excellent site. I had considered myself very experienced with CSS, but this site revolutionized the way I approach putting my documents together: to write HTML that can very literally handle any design you can dream up without modification.

 

So how do the images chaneg dynamically to fit the text in the area?
Cause over there it dynamically changes?

 

I love the site, too. The answer to your question, emil, is that each rendition of the page uses a different style sheet and different set of images. Only the content and HTML code remains exactly the same for each design.

It really is a brilliant demonstration of the power of CSS. If you are the sort who learn's by studying code, you can do a lot worse than csszengarden.com. And, of course, while you're there, click on the CSS Resources link in the menu for a wealth of how-to stuff.

 

You can also achieve that with 'dynamic text replacement'. The text will be replaced by a png image or swf movie. Have a look at http://www.alistapart.com

 

Yeah this is the part I m asking about how would I do that?

 

This is called an image replacement technique. There are lots of them, ranging from basic ones like already showed here to more advanced versions like replacing text with flash.
If you want some advanced stuff, search for it at this blog, he created a technique that replaces headers with Flash text:
http://shauninman.com/plete/

The one at CSSZengarden is probable done like this, though there are variations:
<h1>title</h1>

CSS to replace title with image:
h1 {
background: transparent url(locationofimage.png) no-repeat;
height: 30px; /* asuming the image's height is 30 pixels */
width:200px; /* asuming the image's width is 200 pixels */
text-indent: -9999px; /* this removes the original text, the - is important and use pixels instead of em or % to support Opera */
}

The technique above isn't perfect because there will be nothing if images are turned off and css on.

Some more info on this problem:
http://www.sitepoint.com/blogs/2006/01/16/css-onimages-off/

Now how the image is generated can be done in several ways. Most commonly people use PHP. So if you have PHP available on your server you could use that or a third party script (http://www.hotscripts.com/).
Another method is using swf/Flash, look for that in the blog I gave you.
And the most cumbersome method is making a template in Photoshop and generating/uploading the image yourself.

 

Yeah any body know of a tutorial which teaches this or where would I search for this on the web...

 

Not that it's all that important, but CSS Zen Garden actually does it in the way I had originally showed. A negative text-indent seems like a clumsy way to reproduce the effect of display:none. Especially if the header happens to span more than one line, in which case only the first line will be affected by the indent.

 

FLN, Do you know of a tutorial that shows how to do that echnique I really want to use it

 

There are no tutorials I know of that teach the techniques used at CSS Zen Garden. The real trick to its strengh lies in how the HTML is written rather than the CSS. You have to imagine that the HTML you write will be passed on to someone else who will write the CSS. That other person would have to be able to create any visual design they want from your HTML document. So your HTML would have to have enough semantic structure—and block boxes—to make the CSS job both easy and possible. In the CSS Zen page you'll notice there are even some extra DIVs at the end. And you can continue to use the Zen page as an example to follow for the rest of the HTML coding as well. Once you're set with your HTML document, it's time to learn CSS like the back of your hand. You'll probably need to read the CSS Specification cover to cover. You should be able to write CSS code to spec almost all the time, with a few rare exceptions, mostly from IE, and mostly from its hasLayout concept. You can google, or ask here for solutions to those specific cases.

 

This is all you need.
http://artypapers.com/csshelppile/pcdtr/

 

That doesn't describe the overall techniques used at CSS Zen Garden, however. In fact, Zen Garden doesn't appear to use dynamic text replacement at all; I'm not sure how the topic we even brouht up.

 

@FLN
text-indent is used because display:none will also hide the text for screen readers and similar devices, which is exactly the opposite of what image replacement tries to achieve.

@emil2k
Search for "image replacement" at http://www.alistapart.com/
And you might want to buy "The Zen of CSS Design" by Douglas Bowman (the creator of the Zen Garden), it's a book going through some of the best designs and detailing the techniques that are being used (covering XHTLM, CSS, graphics, design and typography).

 

That sux.
I wasn't aware of that. Perhaps visibility:hidden then, which _should_ apply only to visual browsers.

 

Yeah that hasn't crossed my mind yet, will look into it

 

I know this thread is slightly old, but it had just occured to me that if the media type of the style sheet is declared to be "screen", as mine are, then display:none should not affect screen readers.