JSFiddle - React, Tailwind, and code Playground
by sundaramkumar
HTML
<div>
<h1>LETTER Press</h1>
</div>
CSS
@font-face {
font-family: 'LeagueGothicRegular';
src: url('http://www.midwinter-dg.com/blog_demos/css-text-shadows/fonts/league_gothic-webfont.eot');
src: url('http://www.midwinter-dg.com/blog_demos/css-text-shadows/fonts/league_gothic-webfont.eot?iefix') format('eot'),
url('http://www.midwinter-dg.com/blog_demos/css-text-shadows/fonts/league_gothic-webfont.woff') format('woff'),
url('http://www.midwinter-dg.com/blog_demos/css-text-shadows/fonts/league_gothic-webfont.ttf') format('truetype'),
url('http://www.midwinter-dg.com/blog_demos/css-text-shadows/fonts/league_gothic-webfont.svg#webfontIQSKTUY8') 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; border: 1px solid #424242;
background-image: url(http://www.midwinter-dg.com/blog_demos/css-text-shadows/images/letterpress.gif);
margin-right: auto;
margin-left: auto;
margin-bottom: 10px;
}
h1 {
text-shadow: 0px 1px 1px #4d4d4d;
/*text-shadow: 0px 1px 1px #4d4d4d;, 1px 1px 0px rgba(0,0,0,0.5);*/
color: #222;
font: 80px 'LeagueGothicRegular';
}