Question

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

Answer 1

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.