Mac Mac - 6 months ago 27
CSS Question

Outline effect to text

Are there any way in CSS to give outlines to text with different colors. i want to highlight some part of my text to make it more intuitive like the names link etc changing the link colors etc are common now a days so i want something new.

Answer

There is an experimental webkit property called text-stroke in CSS3, I've been trying to get this to work for some time but have been unsuccessful so far.

What I have done instead is used the already supported text-shadow property (supported in Chrome, Firefox, Opera, and IE 9 I believe).

Use four shadows to simulate a stroked text:

HTML:

<div class="strokeme">
    This text should have a stroke in some browsers
</div>

CSS:

.strokeme
{
    color: white;
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;  
}

I have made a demo for you here :)

And a hovered example is available here :)


As Jason C has mentioned in the comments, the text-stroke css property is now supported by all major browsers, with the exception of Opera Mini. Where this solution will work for backwards compatibility (not really an issue regarding browsers that auto-update) I believe the text-stroke CSS should be used.

Comments