0

how to make my HTML 'font' edge match with background on css ?

i meant to make the color of a 'fat font'(font size) change pixel by pixel to match the background.

such as white font n black background. how to make the font edge color smoothly / gradually change match to background?

e.g. 

<div style="font-size: 24px; weight: 600; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;">

MY TITLE n LOGO

</div>

obviously this can do in photoshop as image, but that would break-my-rule-of-bandwidth. i want it to be HTML n CSS purely. IT IS POSSIBLE? is there any relationship to 'anti-aliasing' thing ? what is anti-alias actually? lazy mode

amin roy
  • 3
  • 3

2 Answers2

2

What you probably want to do (a bit unclear question) is to cast a blurring shadow to the text that has no offset. You can do that by applying a CSS style to your text using text-shadow property like so:

{text-shadow:0 0 2px #888;}

or in your case:

<div style='font-size: 24px; 
            weight: 600; 
            font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
            text-shadow:0 0 2px #888;'>
</div>

> Here's a Fiddle for it.

You can find a reference for this Text-Shadow CSS property at w3schools.com. It takes four parameters:

  • h-shadow: Required. The position of the horizontal shadow. Negative values are allowed
  • v-shadow: Required. The position of the vertical shadow. Negative values are allowed
  • blur: Optional. The blur distance
  • color: Optional. The color of the shadow.

Note that this property isn't supported in Internet Explorer browsers lower than IE10.

What you could do though for IE browsers is apply a blurring filter to the text:

filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=1);

or a glowing filter:

filter:progid:DXImageTransform.Microsoft.Glow(Color=gray,Strength=1);

or both: 

filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=1)
        progid:DXImageTransform.Microsoft.Glow(Color=gray,Strength=1);

IE static filters reference can be found at http://msdn.microsoft.com.

TildalWave
  • 1,677
  • 1
  • 14
  • 20
  • thanks. that shadow help a lot, at least, temporarily. but i think the antialiasing for 'font-smooth' property is the one. but it seems i still couldn't manage to make it happen in
    or

    tag. might be working for some other .

     – amin roy Jan 28 '13 at 07:46
  • What you call 'Anti-aliasing' and is better known as `font smoothing` isn't something you can control through HTML/CSS/JS as it's system dependent. You can turn it off in IE with a trick to apply `filter: alpha(opacity=XX)` with a value of less than 100 (say 99 would do it). If your system has it turned on and you don't see it in your browser, then either you're using a browser that doesn't support it (some Safari versions didn't, for example), or you're using `alpha opacity` on parent elements and that trick I mentioned applies to children elements as well in IE browsers. – TildalWave Jan 28 '13 at 07:53
  • You can read more on limitations of `font smoothing` in various browsers and advantages to the blurred shadow technique **[here](http://daneden.me/2010/12/css-font-smoothing/)** and a SO discussion about it **[here](http://stackoverflow.com/questions/11487427/font-smoothing)**. – TildalWave Jan 28 '13 at 07:57
0

Edit your like this

<div style='font-size: 24px; weight: 600; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;'>
GautamD31
  • 28,552
  • 10
  • 64
  • 85