Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Outlined Type Effect with CSS Text-Shadowing
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;
}
<body>
<div id="wrapper">
<h1>Outlined Type + CSS</h1>
</div>
</body>
@nrrrdcore

This comment has been minimized.

Copy link
Owner Author

@nrrrdcore nrrrdcore commented May 23, 2012

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.

@stevenh512

This comment has been minimized.

Copy link

@stevenh512 stevenh512 commented May 23, 2012

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

@flipactual

This comment has been minimized.

Copy link

@flipactual flipactual commented May 23, 2012

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

@daneden

This comment has been minimized.

Copy link

@daneden daneden commented May 23, 2012

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

@stevenh512

This comment has been minimized.

Copy link

@stevenh512 stevenh512 commented May 23, 2012

@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). 😁

@stevenh512

This comment has been minimized.

Copy link

@stevenh512 stevenh512 commented May 24, 2012

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

@broccolini

This comment has been minimized.

Copy link

@broccolini broccolini commented May 31, 2012

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.