CSS3: Cube with shadow

Question

I think images speak louder than words in this case.

I want to get this effect:

enter image description here

But the best I can do with CSS3 is this:

enter image description here

And the code for this is absolutely terrible:

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%),
            ...

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.

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 <div> element.

Here's what I have so far: http://jsfiddle.net/X7xSf/3/

Any help would be appreciated!

Have a look at this: The author explains how to create a cube: http://www.paulrhayes.com/experiments/cube/index.html — Ayush, Nov 01 '11 at 18:47
I've seen that sort of effect before, but it requires 3 `
` elements. I'm trying to create a cross-browser solution that just displays a flat square on IE and such, and a cube in Webkit and Firefox. — Blender, Nov 01 '11 at 18:49
@Blender why not a cube in FF, Webkit, *and* IE. ;) (may need to use more than one element though) — Joseph Marikle, Nov 01 '11 at 19:00
I'm trying to pimp my image gallery where every single image has this cube construction. When you hover over it, the cube comes out of the grid and makes a hole. I have about 50 images, which might be taxing on low-end (*cough* IE *cough*) browsers. But if I can't find a CSS3 single-element solution, I guess I'll have to do it with 3 elements... — Blender, Nov 01 '11 at 19:13
Funnily enough, the Internet Explorer-only [`Shadow` filter](http://msdn.microsoft.com/en-us/library/ms533086(v=vs.85).aspx) almost produces this effect, but the shadow fades out. — Paul D. Waite, Nov 01 '11 at 23:07

score 10 · Accepted Answer · answered Nov 01 '11 at 19:18

10

I'd use some skew transforms on some CSS generated elements... Take a look at this:

http://jsfiddle.net/X7xSf/12/

If I wanted to use this in production, I'd probably identify which browsers support before and after, but not transforms (only IE8), then use Paul Irish's method from 2008 (http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/) to turn this off for IE8.

answered Nov 01 '11 at 19:18

Rich Bradshaw

71,795
44
182
241

I was *just* thinking about using `:before` and `:after`. This is definitely the way to go, thanks! – Blender Nov 01 '11 at 19:21
Be careful if you change the sizes, I had to manually work out the offsets, widths and heights. – Rich Bradshaw Nov 01 '11 at 19:24
1

You shouldn't have to manually adjust anything, really; I think the following [updated demo](http://jsfiddle.net/davidThomas/X7xSf/17/) should handle things gracefully enough..? [Updated the demo]. – David Thomas Nov 01 '11 at 19:28
Cool – what did you do then, just not specify the height/width on the relevant one? I didn't realise that would work. Good work! – Rich Bradshaw Nov 01 '11 at 19:35
2

I set the `bottom` and `left` to `100%` to push it to the relevant edges, specified the `0` on the 'other' edges to make it full-height/full-width and then specified `top left` for the `transform-origin;` I can't remember if I did anything else, looking at it...but it seems to work happily without redeclaring widths/heights/off-sets =/ – David Thomas Nov 01 '11 at 19:50
Awesome – wish I'd thought of that before trial and erroring it into place! – Rich Bradshaw Nov 01 '11 at 19:51
1

You have no idea how much fun I am having with this: http://jsfiddle.net/X7xSf/29/ – Blender Nov 01 '11 at 19:52
This is the best thing I've ever seen! – Rich Bradshaw Nov 01 '11 at 20:49
Great-looking demo in the fiddle. It animates so smoothly in Chrome. – Paul D. Waite Nov 01 '11 at 23:08

Joseph Marikle · Answer 2 · 2011-11-01T19:45:50.437

Well... My idea was to use border hacks and some masking to get it to work in... IE 8 at least? ~~But I can't figure out how to get the border to animate backwards~~ Fixed it.

You can see my idea here: http://jsfiddle.net/k2AdU/1

and the code concept is to use :before and :after to create a mask for the corners

.cube
{
    width:100px;
    height:100px;
    background:#454545;
    position:relative;
    border-right:20px solid #333;
    border-bottom:20px solid #111;
    border-right-width:0px;
    border-bottom-width:0px;
    left:20px;
    top:20px;
}
.cube:after
{
    content:"";
    display:block;
    position:absolute;
    left:0px;
    top:100%;
    border:10px solid transparent;
    border-left:10px solid white;
    border-bottom:10px solid white;
}
.cube:before
{
    content:"";
    display:block;
    position:absolute;
    top:0px;
    left:100%;
    border:10px solid transparent;
    border-top:10px solid white;
    border-right:10px solid white;
}

I won't be animating with jQuery. CSS3 transformations! Didn't think of using borders. Thanks for the code! — Blender, Nov 01 '11 at 19:52

CSS3: Cube with shadow

2 Answers2