CSS Text Carved or Pressed Effect

If o开发者_运维知识库ne goes here - http://djangocon.us/. At the very top, the djangocon logo is there. This logo is all text & the text is like pressed inside. It kind of feels like it's been carved in.

I have looked into the CSS & didn't get what property could cause this effect. Any one knows?

UPDATE: Looks like I got it wrong. The logo at the top is an image. But the text below that is not. Gives the same pressed text. Dark Green rectangular box (below the navigation bar).

Use text-shadow: 0 1px 0 color; and you'll get the same Effect.

If you need more info, have a look http://www.css3.info/preview/text-shadow/

Text-shadow is correct. I use it regularly and it can produce some interesting effects (although it shouldn't be relied on for anything critical, since browser support isn't complete yet).

However, as other posters have also stated, the image you linked to is well...an image. You can easily accomplish this effect in Photoshop using the blending options on a layer and playing with either unblurred drop shadows or bevel/emboss settings. This is the more reliable way of accomplishing the task, since image support in browsers is obviously more broad than CSS 3 support.

I would usually err on the side of an image for something important like a logo or major announcement. Also, you can control anti-aliasing with an image, something that you don't have complete control over using CSS 3 (although most of the browser-based anti-aliasing is pretty darn nice).

A better example on the page of using text-shadow is in the footer. Here is the calculated style from Chrome:

You want the text-shadow property. http://www.quirksmode.org/css/textshadow.html

Edit: but evidently the page you linked to is actually using images to accomplish it. http://djangocon.us/site_media/static/img/header.png

A quick look with firebug, and it's the text-shadow property. I've never used it myself.

Using text-shadow property you can achieve Text Pressed effect. Refer to this sample http://line25.com/wp-content/uploads/2009/letterpress/demo/demo.html

http://css3please.com is the easiest way to remember these, I find.