Skip to content

Instantly share code, notes, and snippets.

@rfessler

rfessler/default.html

Created October 26, 2012 20:22
Show Gist options
  • Save rfessler/3961261 to your computer and use it in GitHub Desktop.
Save rfessler/3961261 to your computer and use it in GitHub Desktop.
Download ZIP
JavaScript: css sprites for image tags
Raw
default.html
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.clipwrapper { position: relative; height: 48px; width: 48px; border:1px solid pink;}
.clip { position: absolute; top: 0; left: 0; }
.pos-1 { clip:rect(0 48px 48px 0); }
.pos-2 { clip:rect(0 96px 48px 48px); left: -48px; }
.pos-3 { clip:rect(48px 48px 96px 0); top: -48px; }
.pos-4 { clip:rect(48px 96px 96px 48px); top: -48px; left: -48px; }
.pos-1a { clip:rect(48px 96px 96px 48px); top:-48px; left:-48px; }
.pos-2b { clip:rect(0 96px 48px 48px); left: -48px; }
.pos-3c { clip:rect(48px 48px 96px 0); top: -48px; }
.pos-4d { clip:rect(48px 96px 96px 48px); top: -48px; left: -48px; }
.pos-1b { clip:rect(50px 98px 98px 50px); top:-50px; left:-50px; }
.pos-2b { clip:rect(150px 98px 198px 50px); top:-146px; left:-50px; }
.pos-3b { clip:rect(250px 98px 298px 50px); top:-246px; left:-50px; }
.pos-4b { clip:rect(350px 98px 398px 50px); top:-346px; left:-50px; }
</style>
</head>
<body>
<!-- http://css-tricks.com/css-sprites-with-inline-images/ -->
<div class="clipwrapper">
<img src="arrow-sprites.png" alt="arrow" class="clip pos-1b" />
<!--
<img src="arrow-sprites.png" alt="arrow" class="clip pos-2b" />
<img src="arrow-sprites.png" alt="arrow" class="clip pos-3b" />
<img src="arrow-sprites.png" alt="arrow" class="clip pos-4b" />
-->
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment