Skip to content

Instantly share code, notes, and snippets.

@SimonWpt

SimonWpt/isometric_text.html

Created June 24, 2012 17:48
Show Gist options
  • Save SimonWpt/2984149 to your computer and use it in GitHub Desktop.
Save SimonWpt/2984149 to your computer and use it in GitHub Desktop.
Download ZIP
Isometric Text
Raw
isometric_text.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Isometric Text</title>
<meta name="author" content="Bertram Simon / Agentur Simon / http://www.agentur-simon.de">
<style>
/*
*
* For legal reasons, the font "Frucade Regular" is not embedded as web font.
* You can finde the font here: http://pixelfonts.style-force.net/download/frucade-regular/
* Please contact the author for commercial use
*
*/
body{
background:#fff;
}
h1{
color:#bd1220;
font:bold 96px "Frucade Regular";
text-shadow:-1px 1px 0 #172983,-2px 2px 0 #172983,-3px 3px 0 #172983,-4px 4px 0 #172983,-5px 5px 0 #172983,-6px 6px 0 #172983,-7px 7px 0 #172983,-8px 8px 0 #172983,-9px 9px 0 #172983,-10px 10px 10px #666;
margin:10px;
}
h2,h2 a{
color:#799c13;
font:bold 48px "Frucade Regular";
text-shadow:-1px 1px 0 #172983,-2px 2px 0 #172983,-3px 3px 0 #172983;
margin:0 10px 20px 10px;
}
p,ul,li{
color:#333;
font:12px monospace;
margin:10px;
}
li a{
color:#172983;
}
</style>
</head>
<body>
<h1>Isometric Text</h1>
<h2>by <a href="https://twitter.com/#!/SimonWpt">Bertram Simon</a></h2>
<p>How it works:</p>
<ol>
<li>Find a good pixel font (<a href="http://pixelfonts.style-force.net/" target="bold">check this great pixelfont-website</a>)</li>
<li>Choose a fore-, shadow- and background color</li>
<li>Make it big and bold</li>
<li>Cascade a text-shadow-effect</li>
<li>Add a blur effect via text-shadow</li>
<li>Ready</li>
</ol>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment