make embossed text

Question

I found this solution for making an embossed effect with text. Is this really the best way. Any new ideas on it. It just makes it impossible to work with if you have to add additional span tags to get the kerning right. I guess it adds extra nodes and messes up the pseudo selectors.

What about the other answers of that discussion? Have you tried them? — Fabrizio Calderan, Apr 23 '12 at 16:17

score 3 · Accepted Answer · answered Apr 23 '12 at 16:16

3

You can use text shadow.

text-shadow{0px 1px 0px #fff, 0px -1px 0px #000}

This wont work in IE anything earlier than IE9 though.

answered Apr 23 '12 at 16:16

Ollie

646
4
13

compatibility's no problem. But the text shadow really looks like it's just got a shadow. It was looking for a shadow that's inset. To make it look like it's carved into the page – 1252748 Apr 23 '12 at 16:31
You can see http://www.caniuse.com/#search=text-shadow for compatibility and links to resources and online simulator (edit no inset keyword like box-shadow has) – FelipeAls Apr 23 '12 at 16:45
you can just tweak the colours so they are similar to your colour scheme. – Ollie Apr 23 '12 at 16:46
I found [this] (http://www.gordonhallart.com/blog/2011/04/27/creating-a-true-inset-text-effect-using-css3/) which is basically the effect I want, but on the lower right you can see the fuzzy shadow extending out of the text. – 1252748 Apr 23 '12 at 16:46
1

text-shadow:0px 1px 0px rgba(0,0,0,0.3), 0px -1px 0px rgba(255,255,255,0.3); – Ollie Apr 23 '12 at 16:47

score 1 · Answer 2 · answered Apr 23 '12 at 16:15

1

It's not, necessarily, cross-browser friendly, but there's always text-shadow, to emulate the embossed style.

h1.embossed {
    text-shadow: 1px 1px 2px #fff;
}

JS Fiddle demo.

answered Apr 23 '12 at 16:15

David Thomas

249,100
51
377
410

make embossed text

2 Answers2