CODEWITHSUNDEEP
htmlcss
amin roy
amin roy

Reputation: 3

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

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

Upvotes: 0

Views: 2812

Answers (2)

TildalWave
TildalWave

Reputation: 1667

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.

Upvotes: 2

GautamD31
GautamD31

Reputation: 28773

Edit your like this

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

Upvotes: 0

Related Questions