CSS {clip:} Demo

Simple CSS {clip:} Demo using Sprite Image

by J. Albert Bowden

HTML

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>Responsive CSS Sprites using {clip:} on Images</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0;" />
    <link href="http://dev.bowdenweb.com/assets/css/sandbox.css" rel="stylesheet" type="text/css" media="screen, projection" />
    </head>
    <body>
      <div class="content">
        <h1>Responsive CSS Sprites using {clip:} on Images</h1>
<div class="box" style="height:300px;">
        <h2>Sprite Clip 256px</h2>
        <div class="abspositioner"><img src="http://bowdenweb.com/wp/i/mark-of-the-beast-sprite.png" alt="Sprite Clip 256px" class="spriteclip spriteclip-256" /></div></div>
      <div class="box" style="height:200px;">
        <h2>Sprite Clip 128px</h2>
        <div class="abspositioner"><img src="http://bowdenweb.com/wp/i/mark-of-the-beast-sprite.png" alt="Sprite Clip 128px" class="spriteclip spriteclip-128" /></div></div>
      <div class="box" style="height:100px;">
        <h2>Sprite Clip 64px</h2>
        <div class="abspositioner"><img src="http://bowdenweb.com/wp/i/mark-of-the-beast-sprite.png" alt="Sprite Clip 64px" class="spriteclip spriteclip-64" /></div></div>
      <div class="box" style="height:100px;">
        <h2>Sprite Clip 32px</h2>
        <div class="abspositioner"><img src="http://bowdenweb.com/wp/i/mark-of-the-beast-sprite.png" alt="Sprite Clip 32px" class="spriteclip spriteclip-32" /></div></div>
      <div class="box" style="height:100px;">
        <h2>Sprite Clip 24px</h2>
        <div class="abspositioner"><img src="http://bowdenweb.com/wp/i/mark-of-the-beast-sprite.png" alt="Sprite Clip 24px" class="spriteclip spriteclip-24" /></div></div>
      <div class="box" style="height:200px;">
        <h2>Sprite Clip 16px</h2>
        <div class="abspositioner"><img src="http://bowdenweb.com/wp/i/mark-of-the-beast-sprite.png" alt="Sprite Clip 16px" class="spriteclip spriteclip-16" /></div></div>
          
</div>

CSS

.abspositioner{position:relative}
.box h2{margin:0}
.box{margin:10px auto; outline:1px solid #000; width:300px}
.spriteclip{position:absolute; top:0; left:0}
.spriteclip-256{clip:rect(0, 256px, 256px, 0)}
.spriteclip-128{clip:rect(266px, 128px, 394px, 0); top:-266px}
.spriteclip-64{clip:rect(404px, 192px, 468px, 0); top:-404px}
.spriteclip-32{clip:rect(478px, 224px, 510px, 0); top:-478px}
.spriteclip-24{clip:rect(520px, 248px, 544px, 0); top:-520px}
.spriteclip-16{clip:rect(554px, 256px, 570px, 0); top:-554px}