public
Created

Outlined Type Effect with CSS Text-Shadowing

  • Download Gist
frontage.css
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
body {
background-color: #FFF;
}
 
#wrapper {
width: 90%;
margin: 200px auto;
}
 
h1 {
font-family: 'Frontage';
font-size: 50px;
text-align: center;
color: #f9f9f9;
letter-spacing: -5px;
text-shadow: 0 1px 2px rgba(0,0,0,.15),
0 -1px 1px rgba(0,0,0,.1),
0 1px 20px #F9F9F9;
}
frontage.html
HTML
1 2 3 4 5
<body>
<div id="wrapper">
<h1>Outlined Type + CSS</h1>
</div>
</body>

Outlined type + text-shadowing = Magic

Step 1: @font-face a beautiful outlined type like Frontage:

frontage outlined type

Step 2: Add text-shadowing:

frontage css text shadowing

Step 3: Experience the magic.

Another really cool effect.. probably won't Compass this one tonight since I'm about to get to bed, but I might play around with it a bit tomorrow. :grin:

I broke my eyes trying to read this... but I learned something too!

Smart. Renders nicer than -webkit-text-stroke, too (and, y'know, there are other browsers.) Woop!

@shpoonj My eyes aren't that bad yet.. lol.. but I usually learn something new from these too, especially trying to make mixins out of them (forces me to spend a little time analyzing what each line does). :grin:

Compass version here, took me a while to find the font :grin:

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.