Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

creating a Outline to a font

Status
Not open for further replies.

lakeside12

Programmer
Apr 20, 2009
43
CA
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
 
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] :
Code:
[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.
 
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
 
Hi

lakeside12 said:
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.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top