Skip to content

Instantly share code, notes, and snippets.

@tschmidt

tschmidt/3d_text_with_css.html

Created January 21, 2011 22:25
Show Gist options
  • Save tschmidt/790551 to your computer and use it in GitHub Desktop.
Save tschmidt/790551 to your computer and use it in GitHub Desktop.
Download ZIP
3D Text using only CSS...that means no images. At all. Period.
Raw
3d_text_with_css.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>3D Text</title>
<style>
body {
background-color: #11a9e2;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0D86B3), to(#11a9e2));
background-repeat: no-repeat;
}
h1 {
width: 960px;
height: 700px;
line-height: 700px;
text-align: center;
font-size: 150px;
font-family: 'Helvetica Neue', helvetica, arial, sans-serif;
color: #fefefe;
margin: 0 auto;
text-shadow:
0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 0 rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.7),
0 7px 5px rgba(0,0,0,.7),
0 10px 75px rgba(0,0,0,.6)
;
}
</style>
</head>
<body id="3d_text">
<h1>3D Text</h1>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment