CODEWITHSUNDEEP
csstext
Ben
Ben

Reputation: 57287

CSS "sunken"/"inset" letter effect without using image

How is the "sunken" or "inset" effect applied to these letters in this menu? I looked (briefly) with Firebug but can't find how they're doing it. Works in FF, not in IE.

alt text

See http://balsamiq.com/products/mockups/mybalsamiq for actual example.

Upvotes: 3

Views: 9699

Answers (5)

Web_Designer
Web_Designer

Reputation: 74610

Here's a little trick I discovered using the :before and :after pseudo-elements:

http://dabblet.com/gist/1609945

Upvotes: 0

sinelaw
sinelaw

Reputation: 16563

It's this:

text-shadow: 0 1px 0 #FFFFFF;

Upvotes: 1

Hoàng Long
Hoàng Long

Reputation: 10848

As I see, it's the color combination that create the effect. Just change the text to red color and the text is not inset anymore.

Upvotes: 0

Phrogz
Phrogz

Reputation: 303401

This is just a Text Shadow with a color lighter than the background instead of darker, causing it to look like a bevel. (We've been trained to believe that the 'sunlight' on a computer screen generally comes from the upper left corner.)

The CSS rule shown when using the Developer Tools for Safari shows:

text-shadow: white 0px 1px 0px;

Upvotes: 7

BoltClock
BoltClock

Reputation: 724212

That is most likely a text-shadow:

p {
    text-shadow: 0 1px 0 #fff;
}

No version of IE in existence (not even IE9 beta) supports text-shadow.

Upvotes: 4

Related Questions