title: CSS3: Cube with shadow
body: <p>I think images speak louder than words in this case.</p>
  
  <p><strong>I want to get this effect:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/uQIOm.png" alt="enter image description here"></p>
  
  <p><strong>But the best I can do with CSS3 is this:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/j6b0n.png" alt="enter image description here"></p>
  
  <p>And the code for this is absolutely terrible:</p>
  
  <pre><code>box-shadow: 1px 1px hsl(0, 0%, 27%),
              2px 2px hsl(0, 0%, 27%),
              3px 3px hsl(0, 0%, 27%),
              4px 4px hsl(0, 0%, 27%),
              5px 5px hsl(0, 0%, 27%),
              6px 6px hsl(0, 0%, 27%),
              7px 7px hsl(0, 0%, 27%),
              8px 8px hsl(0, 0%, 27%),
              ...
  </code></pre>
  
  <p>Is there any way that I can create an effect like this with pure CSS3? I don't mind having it be 3D, but isometric would be preferred.</p>
  
  <p>I don't need to place content onto the sides of the box, just onto the front face, so I'm working with just a single <code>&lt;div&gt;</code> element.</p>
  
  <p><strong>Here's what I have so far: <a href="http://jsfiddle.net/X7xSf/3/" rel="noreferrer">http://jsfiddle.net/X7xSf/3/</a></strong></p>
  
  <p>Any help would be appreciated!</p>