CODEWITHSUNDEEP
cssgoogle-chromecross-browser
Dónal
Dónal

Reputation: 187399

css text-shadow in Chrome

On this page, I've applied a text shadow to the headings which looks good in Firefox:

enter image description here

But it looks awful in Chrome v.17

enter image description here

I saw this suggestion and changed the text shadow style from

text-shadow: 1px 1px 1px black;

to:

text-shadow: 0 0 0 transparent, 1px 1px 1px black;

But it made no difference. Is there anything I can do to improve the way the text shadows are rendered in Chrome? Ideally, I'd like them to look the same in Chrome as they do in Firefox.

Upvotes: 2

Views: 10767

Answers (6)

OriginalPancake7
OriginalPancake7

Reputation: 11

I noticed that Firefox and Chrome render text-shadow differently. I was able to use this and it seemed like it did help a bit:

.logo {
 text-shadow: 1px 0 0 black;
}

before after

Upvotes: 1

Saurabh Mistry
Saurabh Mistry

Reputation: 13699

text-shadow is must be in below format :

textShadow = color horizontalShadow(px) verticalShadow(px) blur(px);

example :

text-shadow: rgb(246, 0, 0) 5px 3px 8px;

output : enter image description here

Upvotes: 0

mike
mike

Reputation: 749

check this out may help a bit im not sure though. It seems you may have anti-aliasing issues and someone helped me fix anti-aliasing in every browser..

check it: Antialiased text in Firefox after CSS rotation

This incorporates including translate3d(0px,0px,1px) so that the graphic processor handles the processing and softens the aliasing

Upvotes: 0

Katti
Katti

Reputation: 2121

Its working fine for me.

Chrome 17.0.963. Firefox 11.0

Dunno what's wrong. Try increasing the font size.!

Upvotes: 0

Shawn Taylor
Shawn Taylor

Reputation: 3969

Try this instead,

   text-shadow: 0px 0px rgba(0,0,0,0.75), 
     0px 1px rgba(0,0,0,0.75), 
     1px 0px rgba(0,0,0,0.75), 
     0px 0px rgba(0,0,0,0.75);

Upvotes: 0

Bram Vanroy
Bram Vanroy

Reputation: 28554

If I were you I would slightly change the shadow. Changing it to:

text-shadow: 1px 1px 0 black;

Seems to solve problem here in Chrome.

Upvotes: 3

Related Questions