-1

Here is an image I created of a board with a shadow behind it. The board is supposed to be leaning against a wall so the shadow is in a triangular shape on both sides.

enter image description here

Is it possible to create a shadow like this using only CSS? Also, if possible, is the method cross-browser compatible?

J82
  • 8,267
  • 23
  • 58
  • 87
  • How did you create the image? Does the image consist of a photograph of a board in front of a wall, or was it edited in some way? – Anderson Green May 29 '13 at 01:46
  • It was all digitally created in Photoshop using textures of wood and linen. – J82 May 29 '13 at 20:25

1 Answers1

6

Is it possible to create a shadow like this using only CSS?

Yes, using pseudoelements, box shadows, and 2D transformations – specifically, a rotation. An example is at the end of this answer.

Is the method cross-browser compatible?

Sort of. The ideal code isn't fully compatible with older versions of IE. To get that support, you'll need to make some compromises, which I'll list below:

Here's the support breakdown:

:before and :after – IE8+ only. For deeper support, you could replace these with less-semantic div elements.

rotation – IE6+ with IE-specific rules; a reference that shows these rules is in the note at the end of the example

box-shadow – IE9+ To make these shadow work in IE6+, you could use CSSPie.

Example of the ideal code

Here's a very quick example to get you started.

<div id="board">
  Place image here!
</div>

CSS

#board {
  position: absolute;
  left: 50px;
  top: 50px;
  background: #e5e5e5;
  text-align: center;
  width: 100px;
  height: 100px;
}
#board:before {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 0;
  left: 5px;
  width: 5px;
  height: 50%;
  background: rgba(0, 0, 0, 0.7);
  -webkit-box-shadow: -5px 0 10px rgba(0,0,0, 0.7);
  -moz-box-shadow: -5px 0 10px rgba(0, 0, 0, 0.7);
  box-shadow: -5px 0 10px rgba(0, 0, 0, 0.7);
  -webkit-transform: rotate(6deg);
  -moz-transform: rotate(6deg);
  -o-transform: rotate(6deg);
  -ms-transform: rotate(6deg);
  transform: rotate(6deg);
}
#board:after {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 0;
  right: 5px;
  width: 5px;
  height: 50%;
  background: rgba(0, 0, 0, 0.7);
  -webkit-box-shadow: 5px 0 10px rgba(0,0,0, 0.7);
  -moz-box-shadow: 5px 0 10px rgba(0, 0, 0, 0.7);
  box-shadow: 5px 0 10px rgba(0, 0, 0, 0.7);
  -webkit-transform: rotate(-6deg);
  -moz-transform: rotate(-6deg);
  -o-transform: rotate(-6deg);
  -ms-transform: rotate(-6deg);
  transform: rotate(-6deg);
}

Where should I go from here?

  • You'll want to implement the syntax for rotations in early IEs, or use a Javascript library to add the support, both of which can be read about over here.
  • You might also want the shadows to cut off like they do in your image. This could be done by covering up the part of the shadow that sticks out with an element that's beneath it.
  • I also threw that together pretty quickly, so you might want to adjust it to get the shadows looking just like how you want them.
Community
  • 1
  • 1
jamesplease
  • 12,547
  • 6
  • 47
  • 73