1

I want to create an inset text with the CSS. It works nicely on Chrome and safari but doesn't work on firefox and IE also, I have tried countless possibilities but it still doesn't work :-/ Could you please help me with that?

The CSS:

text-align: center;
line-height: 60px;
font-size: 60px;

background-color: #112151;
-moz-background-color: #112151;
-webkit-background-color: #112151;
color: transparent;
text-shadow: 0px 2px 3px rgba(255,255,255,0.5);
-moz-text-shadow: 0px 2px 3px rgba(255,255,255,0.5);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;

This is how it looks in firefox This is how it looks in chrome

How can I achieve the same design on firefox? It looks like a problem with the background color and the transparent color of the text, but I cant seem to figure out a way how they work together on mozilla and IE.

Passerby
  • 9,715
  • 2
  • 33
  • 50
kalafun
  • 3,512
  • 6
  • 35
  • 49

1 Answers1

0

I did a small example jsfiddle. The trick in creating such a shadow is by adding a text-shadow above and under the text (both are behind, but they're moved up or down).

http://jsfiddle.net/mine/ru6pc/

It seems to work with Firefox, but you'll have problems with IE, I guess. IE < 10 doesn't support CSS-text-shadow yet, so you might take a look at pie-CSS (I don't know, if they're supporting it, but might be worth a look).

.inset {
    font-family: Arial;
    font-weight: bold;
    font-size: 20pt;
    color: #4e830f;
    text-shadow: 0px -1px 2px rgba(0, 0, 0, 0.75),
                 0px 1px 2px rgba(255, 255, 255, 0.75);    
}
michaeln
  • 1,032
  • 17
  • 33