3D Shadow Box Effect

Question

So, I know how to make a basic shadow with CSS3. You can see this at the top of the picture below.

The effect I'm trying to achieve is the shadow of a 3D window, as shown below at the bottom of the picture.

Any ideas on how to do this with shadows in CSS3?

Answer 1

Unfortunately, the shadows of the boxes are actually just flat layers. However, you can apply several shadow shadows to create this effect.

.box-shadow-3d{ box-shadow: 1px 1px 0px #999, 2px 2px 0px #999, 3px 3px 0px #999, 4px 4px 0px #999, 5px 5px 0px #999, 6px 6px 0px #999; } 

Answer 2

you can use pseudo-element as shadow

 div { background: black; height: 100px; width: 100px; position: relative; } div:after, div:before { content: ''; background: grey; position: absolute; } div:after { width: 100%; height: 20px; left: 10px; bottom: 0; transform: translatey(100%) skewx(45deg); } div:before { width: 20px; height: 100%; right: 0; transform: translatex(100%) skewy(45deg); top: 10px; } 

 <div></div> 

Answer 3

Here is a real three-dimensional shadow using perspective and a pseudo-element :before .

 body { background: lightblue; } .foo { position: relative; display: inline-block; -webkit-perspective: 1000px; -moz-perspective: 1000px; persepctive: 1000px; margin: 20px; margin-top: 50px; } .foo .box { transform: rotateY(-40deg); height: 350px; width: 250px; background-color: black; } .foo:before { content: ""; top: -15px; position: absolute; width: 50px; height: 375px; background-color: grey; transform: translateX(215px) translateY(2.7px) rotateY(55deg) } 

 <div class="foo"> <div class="box"></div> </div> 

Answer 4

You can add horizontal / vertical offsets of several box shadows, each one slightly larger than the previous one. The more shadows you add, the more pronounced the effect. Here is a fiddle example.

 div { background: black; height: 100px; width: 100px; box-shadow: 0 01px gray, 01px 0 gray, 01px 02px gray, 02px 01px gray, 02px 03px gray, 03px 02px gray, 03px 04px gray, 04px 03px gray, 04px 05px gray, 05px 04px gray, 05px 06px gray, 06px 05px gray; } 

Answer 5

I had some problems with these two options, so I adapted some diagonal gradients from Lea Verou's excellent CSS Secrets book. I was thinking about creating a gradient inside the right and bottom borders using border-image , but this property does not allow the use of edge targeting, à la border-right-image , etc.

So, I decided to use a pseudo-element with two truncated corners, which seem to work very well. You must be careful to set the gradient width to 1.414, the size of half the indentation, as this will be the diagonal of the square (the square root of two). Also, since this is a pseudo-element, be careful with proper placement. It is interesting to hear what you think.

 div { background: #bbb; padding: 1em 1.2em; width: 50%; margin: 0 auto; color: #111; font: 150%/1.2 Georgia, Palatino, Times, serif; position: relative; } div:after { content:" "; position:absolute; top:0; left: 0; width:100%; height:100%; padding: 1.42em; /* (square root of gradient position) */ background: #000; /* Fallback if not supported */ background: linear-gradient(-135deg, transparent 2em, #000 0) top right, linear-gradient(#000, #000) padding-box bottom right, linear-gradient(45deg, transparent 2em, #000 0) bottom left; /*I have avoided adding -webkit-, -moz and -0 prefixs for linear-gradient. You may put them in later to be extra safe*/ background-size: 50% 50%; /* There is no reason to paint the upper left quadrant, so I didn't. */ background-repeat: no-repeat; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; /* Many people use border-box as default these days. Unfortunately, the box cannot be sized using border-box settings with the combination of padding in ems and percentages. So this is reset to content-box, just in case. */ z-index: -1; /* To keep the shadow behind the div*/ 

 <div>This is a short sentence to demonstrate that our little div is responsive.</div> 

Answer 6

Here's a small implementation inspired by @Vitorino fernandes in stylus ...

 offset = 10 border = 3 .offsetbox margin offset padding offset text-align center box-shadow inset 0 0 0 unit(border,px) black background white display inline-block position relative &:after, &:before content '' background black position absolute &:after width 100% height offset transform translatey(100%) skewx(-45deg) right (offset/2) bottom 0 &:before height 100% width offset transform: translatex(-100%) skewy(-45deg) left 0 top (offset/2)