html - What happened with my text shadows in Google Chrome? -


so have simple style here previosly chrome rendered same way ff - this

soft ff 4 rendering

and on sudden on document in chrome , see this

enter image description here

not transparent @ shadows=( tham - how 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;} 

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

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

where first 3 numbers rbg value (red, green, blue) , fourth number opacity (from 0 1). above example black @ 20% opacity.

also, strange shadow weight seems coming blur value on text-shadow. when change 1px 1px 0 gives more shadow 0px 1px 1px. no idea why.


Comments

Popular posts from this blog

objective c - Change font of selected text in UITextView -

php - Accessing POST data in Facebook cavas app -

c# - Getting control value when switching a view as part of a multiview -