Rock Text

by sundaramkumar

HTML

<div>
		<h1>I am a rock…</h1>
	</div>

CSS

@font-face {
    font-family: 'ChunkFiveRegular';
    src: url('http://www.midwinter-dg.com/blog_demos/css-text-shadows/fonts/chunkfive-webfont.eot');
    src: url('http://www.midwinter-dg.com/blog_demos/css-text-shadows/fonts/chunkfive-webfont.eot?iefix') format('eot'),
         url('http://www.midwinter-dg.com/blog_demos/css-text-shadows/fonts/chunkfive-webfont.woff') format('woff'),
         url('http://www.midwinter-dg.com/blog_demos/css-text-shadows/fonts/chunkfive-webfont.ttf') format('truetype'),
         url('http://www.midwinter-dg.com/blog_demos/css-text-shadows/fonts/chunkfive-webfont.svg#webfont6hibqX7I') 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: 0 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;
	background-color: #7ca0b6;
	margin-bottom: 10px;
	background-image: url(http://www.midwinter-dg.com/blog_demos/css-text-shadows/images/three-d.jpg);
}

h1 {
	color: #fff;
	text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
	font: 80px 'ChunkFiveRegular';
}