CODEWITHSUNDEEP
htmlcssgoogle-chromerendering
Rella
Rella

Reputation: 66935

What happened with my text shadows in Google Chrome?

So I have some simple style here previosly Chrome rendered it same way as FF - like this

soft FF 4 rendering

and all over sudden I look on my document in chrome and see this

enter image description here

not transparent at all shadows=( What to do with tham - how to fix?

enter image description here

My CSS code:

body{padding: 5px;background-color: #FFF;font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif}
h1,h2,p{margin: 0 10px}
h1,h2{font-size: 250%;color: #FFF; text-shadow: 0px 1px 1px #000;}
h2{font-size: 120%;}
div#nifty{ margin: 0 1%;background: #9BD1FA}
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
p{color: #000;text-shadow: 0px 1px 1px #fff;padding-bottom:0.3em}
input[type="button"], .eButton {width: 150px;padding: 5px 10px;word-wrap: break-word;height: auto;}}
::-moz-selection {   background-color: #fbfdfe;  color: #ff6c24; text-shadow: 0px 1px 1px #258ffd;}
::selection {  background-color: #fbfdfe;   color: #fff;   text-shadow: 0px 1px 1px #258ffd;}

Upvotes: 6

Views: 520

Answers (1)

user641656
user641656

Reputation:

If you're looking for semi-transparent shadows, you could try using rgba values instead of hex values. So it'd be:

h1 { text-shadow: 1px 1px 1px rgba(0,0,0,.20); }

where the first three numbers are the RBG value (Red, Green, Blue) and the fourth number is the opacity (from 0 to 1). So the above example is black at a 20% opacity.

Also, the strange shadow weight seems to be coming from the blur value on the text-shadow. When I change it to 1px 1px 0 it gives a more even shadow than 0px 1px 1px. No idea why.

Upvotes: 1

Related Questions