Skip to content

Instantly share code, notes, and snippets.

@atomize
Created March 7, 2012 03:50
Show Gist options
  • Save atomize/1990821 to your computer and use it in GitHub Desktop.
Save atomize/1990821 to your computer and use it in GitHub Desktop.
CSS3 Fonts
<html>
<head>
<style>
body {
font: 14px/20px 'Helvetica Neue', Arial, sans-serif;
color: #fff;
background-color:#4fa6b9;
}
.effect_1 {
color: white;
font: 80px/100px Garamond, 'Hoefler Text', Times New Roman, Times, serif;
margin-bottom: 20px;
text-shadow: 0 1px 0 #999,
0 2px 0 #999,
0 3px 0 #999,
0 4px 0 #999,
0 5px 0 #999,
0 6px 0 black;
}
.effect_2 {
font: 80px/100px Garamond, 'Hoefler Text', Times New Roman, Times, serif;
text-shadow: -1px -1px 0px black, 1px 1px 0px #666;
}
.effect_3
{
font: 80px/100px Garamond, 'Hoefler Text', Times New Roman, Times, serif;
text-shadow: 2px 2px 8px white;
color: transparent;
}
@font-face
{
font-family: chandy;
src: url('comesinhandy.ttf')
format("opentype");
}
.myfont
{
font-family:chandy;font-size:80px
}
</style>
</head>
<body>
<div class="effect_1">this is useful</div>
<div class='effect_2'>this is useful</div>
<div class="effect_3">this is useful</div>
<div class='myfont' style="height:100px">
berti...berti...berti...</div>
<a href='http://gist.github.com/atomize'>gist.atomize</a>
<a href='http://seqr.dyndns-server.com/files/comesinhandy.ttf'>comesinhandy.ttf</a>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment