Skip to content

Instantly share code, notes, and snippets.

@laribee

laribee/css-text-anaglyph-1

Created March 8, 2011 17:24
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save laribee/860596 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save laribee/860596 to your computer and use it in GitHub Desktop.
Download ZIP
CSS-based Textual Anaglyph (Attempt #1)
Raw
css-text-anaglyph-1
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
body { background-color: #000; background-image: url(http://www.equalizergraphics.com/images/anaglyph.png)}
.black, .cyan, .red { position: fixed; top: 200px; left: 200px; font-family: arial; font-size: 10em; }
.black { color: #FFF; z-index: 0; }
.red { z-index: 1; color: #FF0000; left: 198px; top: 202px }
.cyan { z-index: 2; color: #00FFFF; left: 202px; top: 198px }
.red { opacity: 0.6; }
.cyan { opacity: 0.4; }
.small { font-size: 5em; position: fixed; top: 400px; left: 200px; font-family: arial;}
.small.cyan { top: 401px; left: 201px; }
.small.red { top: 399px; left: 199px; }
</style>
</head>
<body>
<div class="black">HELLO TODAY</div>
<div class="cyan">HELLO TODAY</div>
<div class="red">HELLO TODAY</div>
<div class="black small">how are you?</div>
<div class="cyan small">how are you?</div>
<div class="red small">how are you?</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment