Outline effect to text

Question

Are there any ways in CSS to give outlines to text with different colors ? I want to highlight some parts of my text to make it more intuitive - like the names, links, etc. Changing the link colors etc. are common nowadays, so I want something new.

Answer 1

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:

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

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

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-shadow 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.

Answer 2

Easy! SVG to the rescue.

This is a simplified method:

svg{   font   : bold 70px Century Gothic, Arial;   width  : 100%;   height : 120px; }  text{   fill            : none;   stroke          : black;   stroke-width    : .5px;   stroke-linejoin : round;   animation       : 2s pulsate infinite; }  @keyframes pulsate {   50%{ stroke-width:5px } }

<svg viewBox="0 0 450 50">   <text y="50">Scalable Title</text> </svg>

Here's a more complex demo.