Reputation:

CSS Text Carved or Pressed Effect

If one 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?

alt text

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).

Upvotes: 2

Answers (6)

surendran

Reputation: 476

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

Upvotes: 0

Steve Bennett

Reputation: 126457

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

Upvotes: 0

Tim M.

Reputation: 54377

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:

alt text