creating a Outline to a font

[lakeside12]

Can you help

How do I create a "Black" Outline on a font which is in white
and I would like if possible to vary the thickness of the outline as well.

Many thanks

 

[feherke]

Hi

As the [tt]text-outline[/tt] CSS 3 property is currently not supported, you will have to do it with [tt]text-shadow[/tt] :

[teal].outline[/teal] [teal]{[/teal]
  [COLOR=coral]color:[/color] [COLOR=darkgoldenrod]white[/color];
  [COLOR=coral]text-shadow:[/color] [COLOR=darkgoldenrod]black[/color] [COLOR=darkgoldenrod]0[/color] [COLOR=darkgoldenrod]0[/color] [COLOR=darkgoldenrod]1px[/color];
[teal]}[/teal]

[gray]/* or */[/gray]

[teal].outline[/teal] [teal]{[/teal]
  [COLOR=coral]color:[/color] [COLOR=darkgoldenrod]white[/color];
  [COLOR=coral]text-shadow:[/color] [COLOR=darkgoldenrod]black[/color] [COLOR=darkgoldenrod]10px[/color] [COLOR=darkgoldenrod]10px[/color], [COLOR=darkgoldenrod]black[/color] [COLOR=darkgoldenrod]0[/color] [COLOR=darkgoldenrod]10px[/color], [COLOR=darkgoldenrod]black[/color] [COLOR=darkgoldenrod]-10px[/color] [COLOR=darkgoldenrod]10px[/color], [COLOR=darkgoldenrod]black[/color] [COLOR=darkgoldenrod]-10px[/color] [COLOR=darkgoldenrod]0[/color], [COLOR=darkgoldenrod]black[/color] [COLOR=darkgoldenrod]-10px[/color] [COLOR=darkgoldenrod]-10px[/color], [COLOR=darkgoldenrod]black[/color] [COLOR=darkgoldenrod]0[/color] [COLOR=darkgoldenrod]-10px[/color], [COLOR=darkgoldenrod]black[/color] [COLOR=darkgoldenrod]10px[/color] [COLOR=darkgoldenrod]-10px[/color], [COLOR=darkgoldenrod]black[/color] [COLOR=darkgoldenrod]10px[/color] [COLOR=darkgoldenrod]0[/color];
[teal]}[/teal]

Note that incrementing the shadow size will reveal the ugly truth : those are not outlines, but shadows. Also note that you have to set the [tt]color[/tt] to your background color instead of white.


Feherke.

http://free.rootshell.be/~feherke/

 

[lakeside12]

Thank you

Worked perfectly

_______________________

 

[ChrisHunt]

Be aware that it won't work on older browsers, so if the black outline is the only way these letters will show up on their background, you may need a fallback.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[lakeside12]

Wow thank you !!!
hmmm, important point, might explain lower then normal conversions, which browsers are older browsers, I guess I can try and detect an older browser, but I would need to know what constituted a older browser

Any help appreciated

Kind regards

 

[feherke]

Hi

I guess I can try and detect an older browser, but I would need to know what constituted a older browser

You not need to know the browser age. Just check the feature.

You could use Modernizr for that, and [tt]Modernizr.textshadow[/tt] will be [tt]true[/tt] only if the browser supports [tt]text-shadow[/tt].


Feherke.

http://free.rootshell.be/~feherke/