Skip to content

Instantly share code, notes, and snippets.

@TehMaster
Forked from dgmid/dabblet.css
Created March 30, 2012 19:49
Show Gist options
  • Save TehMaster/2254428 to your computer and use it in GitHub Desktop.
Save TehMaster/2254428 to your computer and use it in GitHub Desktop.
CSS Style Sheet for Retro Font
{"view":"split","seethrough":"","prefixfree":"1","page":"css"}
@font-face {
font-family: 'BazarMedium';
src: url('http://www.midwinter-dg.com/blog_demos/css-text-shadows/fonts/bazar-webfont.eot');
src: url('http://www.midwinter-dg.com/blog_demos/css-text-shadows/fonts/bazar-webfont.eot?iefix') format('eot'),
url('http://www.midwinter-dg.com/blog_demos/css-text-shadows/fonts/bazar-webfont.woff') format('woff'),
url('http://www.midwinter-dg.com/blog_demos/css-text-shadows/fonts/bazar-webfont.ttf') format('truetype'),
url('http://www.midwinter-dg.com/blog_demos/css-text-shadows/fonts/bazar-webfont.svg#webfont4U38ahXF') format('svg');
font-weight: normal;
font-style: normal;
}
body {
text-align: center;
background: #383838 url(http://www.midwinter-dg.com/images/theme/body.gif) repeat;
width:1000px;
margin: 80px auto 40px;
}
p {
width: 300px;
margin: 40px auto;
text-align: center;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #999;
}
a:link, a:visited {
color: #ccc;
text-decoration: none;
}
a:hover, a:active {
color: #0080ff;
}
/* text-shadow styles */
div {
width: 998px; margin-right: auto;
margin-left: auto;
border: 1px solid #424242;
margin-bottom: 10px;
background: #2c2e38 url(http://www.midwinter-dg.com/blog_demos/css-text-shadows/images/retro.jpg) center center;
}
Z1 {
color: #d7ceb2; text-shadow: 3px 3px 0px #2c2e38, 5px 5px 0px #5c5f72;
font: 80px 'BazarMedium';
letter-spacing: 10px;
}
.smaller {
font-size: .65em;
vertical-align: .2em;
}
<LINK href="http://dl.dropbox.com/u/4947039/ZC-List.css" rel="stylesheet" type="text/css">
<body>
<div>
<h1><span class="smaller">★</span> <font color="#FD0808">Z</font><span class="smaller"><font color="#D40831">A</font><font color="#AB085A">C</font><font color="#820883">H</font><font color="#5A08AB">'</font><font color="#3108D4">S</font></span><font color="#0A2BDA">A</font><span class="smaller"><font color="#0D4EB7">W</font><font color="#0F7194">E</font><font color="#129471">S</font><font color="#14B74E">O</font><font color="#17DA2B">M</font><font color="#19FD08">E</font></span><font color="#65D408">C</font><span class="smaller"><font color="#8BC008">L</font><font color="#B1AC08">I</font><font color="#D79708">E</font><font color="#FD8308">N</font><font color="#FD6F08">T</font></span><font color="#FD4608">L</font><span class="smaller"><font color="#FD3108">I</font><font color="#FD1D08">S</font><font color="#FD0808">T</font></span><span class="smaller">★</span></h1>
</div>
</body>
@CodingWithWeed
Copy link

whoah, it looks awesome xD. Thanks!!!

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