The idea is pretty simple: use the :before pseudo-element with the -webkit-text-stroke property set to create a "stroked" copy of the main text, then use z-index to put the copy behind the original, ending up with an outside stroke... You can even add a second copy with an :after pseudo-element using a larger stroke for double the fun!
The motivation for this came from re-reading an old post from 2010 about adding stroke to web text on CSS-Tricks by the Incredibly Awesome Chris Coyier. I wondered if it was possible to do the outside stroke with the browsers we have today. It's been over three years, which is almost infinity in Internet time, right?
While webkit has the -webkit-text-stroke CSS attribute, this really behaves like a centered stroke, and I agree with Chris' opinion that the outside stroke would be more visually pleasing and usable on the web.
/* prepare the selectors to add a stroke to */
.stroke-single,
.stroke-double {
position: relative;
background: transparent;
z-index: 0;
}
/* add a single stroke */
.stroke-single:before,
.stroke-double:before {
content: attr(title);
position: absolute;
-webkit-text-stroke: 0.2em #bada55; /* Chris Coyier's favorite color! */
left: 0;
z-index: -1;
}
/* add a double stroke */
.stroke-double:after {
content: attr(title);
position: absolute;
-webkit-text-stroke: 0.4em #778B37;
left: 0;
z-index: -2;
}
As you might have noticed, the code above uses the attr(title) attribute to define the text to have the outline. I guess I could have used any data-* custom attribute too. You need to populate that attribute programmatically on the server (with php, node, etc) or on the client via jQuery. I like to keep things simple and used jQuery in this page.
$(function(){
$('.stroke-double, .stroke-single').attr('title', function(){
return $(this).html();
});
});This is not a perfect solution yet (then, again, what is?), it would be nice to use the custom data- attributes to define a color, but at the time of writing, webkit-based browsers only seem to support data- attributes in the content property. Also, there is still no equivalent solution for non-webkit browsers. Lastly, depending on the font you chose, there may be rendering artefacts on capital letters with oblique angles, like "M" or "W" and native fonts produced no outline at all in Safari.
Caveats aside, this is still a pretty cool solution that will work for the majority of browsers out there, if you chose the right webfont that renders properly.
I care. So, what do you think of her, Han? Partially, but it also obeys your commands. Obi-Wan is here. The Force is with him.
What?! You're all clear, kid. Let's blow this thing and go home! No! Alderaan is peaceful. We have no weapons. You can't possibly… You don't believe in the Force, do you? The more you tighten your grip, Tarkin, the more star systems will slip through your fingers.
Escape is not his plan. I must face him, alone. Remember, a Jedi can feel the Force flowing through him. Look, I can take you as far as Anchorhead. You can get a transport there to Mos Eisley or wherever you're going. I don't know what you're talking about. I am a member of the Imperial Senate on a diplomatic mission to Alderaan-- I can't get involved! I've got work to do! It's not that I like the Empire, I hate it, but there's nothing I can do about it right now. It's such a long way from here. I call it luck.
What good is a reward if you ain't around to use it? Besides, attacking that battle station ain't my idea of courage. It's more like…suicide. You mean it controls your actions? I don't know what you're talking about. I am a member of the Imperial Senate on a diplomatic mission to Alderaan-- I call it luck.