Skip to content

Instantly share code, notes, and snippets.

@futhr
Created September 9, 2013 19:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save futhr/6500249 to your computer and use it in GitHub Desktop.
Save futhr/6500249 to your computer and use it in GitHub Desktop.
Letterpress text Fx
/**
* Letterpress text Fx
* Issue: text shadow need to go on inside.
*/
@import url(http://fonts.googleapis.com/css?family=Monofett|Crushed|Voces|Quattrocento|Open+Sans|Play|Yanone+Kaffeesatz|Carrois+Gothic+SC|Zeyada|Covered+By+Your+Grace|Allura);
body {
text-align:center;
background: url(http://www.midwinter-dg.com/blog_demos/css-text-shadows/images/letterpress.gif) repeat;
width: 1000px;
margin: 80px auto;
}
/**
* Monofett // cool need big font sizes
* Crushed // normal good for compact titles
* Voces // both futurisic clean
* Quattrocento // normal classic
* Open+Sans
* Play // normal very clean
* Yanone Kaffeesatz // normal nice
* Carrois Gothic SC // normal nice
* Zeyada // upper nice handwriting
* Covered By Your Grace // upper
* Allura
*/
h1 {
text-shadow: 0 1px 1px #444;
color: #111;
font: 40px 'Covered By Your Grace';
font-weight: 600;
text-transform: uppercase;
}
.div-shadow {
text-shadow: 0 1px 1px #444;
color: #F6F6F6;
font: 16px 'Voces';
border-bottom: 3px solid #111;
padding: 5px;
box-shadow: 0 1px 4px #444;
background-color: #222;
width: 100%;
}
hr {
border: 1px solid black;
box-shadow: 0 1px 2px #444;
}
<!-- content to be placed inside <body>…</body> -->
<body>
<div class="div-shadow">menu</div>
<hr>
<h1>Listing Pages</h1>
<body/>
// alert('Hello world!');
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment