Skip to content

Instantly share code, notes, and snippets.

@stevenh512
Forked from nrrrdcore/frontage.css
Created May 23, 2012 08:29
Show Gist options
  • Save stevenh512/2773908 to your computer and use it in GitHub Desktop.
Save stevenh512/2773908 to your computer and use it in GitHub Desktop.
Outlined Type Effect with CSS Text-Shadowing
@import "compass/css3";
// You will need the Frontage Outline font, which you can get for free
// at http://www.paywithatweet.com/pay/?id=70b1023b08cf7884550f2ffda6892bb8
@include font-face("Frontage", "fonts/Frontage-Outline.otf");
@mixin frontage-outline {
font-family: 'Frontage';
color: f9f9f9;
@include text-shadow(0 1px 2px rgba(0,0,0,.15),
0 -1px 1px rgba(0,0,0,.1),
0 1px 20px #F9F9F9);
}
# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"
# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed
# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true
# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false
# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
body {
background-color: white;
}
#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;
}
<html>
<head>
<title>...</title>
<link rel="stylesheet" href="stylesheets/screen.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<h1>Outlined Type + CSS</h1>
</div>
</body>
</html>
@import "_outline";
body {
background-color: white;
}
#wrapper {
width: 90%;
margin: 200px auto;
}
h1 {
font-size: 50px;
text-align: center;
@include frontage-outline;
}
@stevenh512
Copy link
Author

Another cool CSS snippet I stole from @nrrrdcore and converted to Compass.. having fun with this lol

Screenshot

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment