Quantcast
Channel: Outline effect to text - Stack Overflow
Viewing all articles
Browse latest Browse all 18

Answer by Orwellophile for Outline effect to text

$
0
0

I'm sorry, but if you've gotten this far, you'll realise that all the other answers are inadequate or require SVG.

Take-Two v Anderson

Note: This beautiful outlining will cost you the small price of maintaining a copy of the text in a data-content attribute, which is used by a layered CSS3 ::before element that renders the fill text over the actual outline.

.outline {  color: black;  -webkit-text-stroke: 0.15em black;}.outline::before {  content: attr(data-content);  -webkit-text-fill-color: white;  -webkit-text-stroke: 0;  position: absolute;}.outline-wrapper {  font-family: "DaytonaW01-CondensedBold", Impact, Times, serif;  font-size: 50px;}
<div class="outline-wrapper"><div class="outline" data-content="Take-Two v Anderson">Take-Two v Anderson</div></div><link href="https://db.onlinewebfonts.com/c/998b5de3cda797387727724405beb7d4?family=DaytonaW01-CondensedBold" rel="stylesheet" type="text/css"/>

The external style link is just to include the font, and is not required -- though using a thin font may require adjustment to the stroking parameter.


Viewing all articles
Browse latest Browse all 18

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>