Question

I’m attempting to give a ‘card’ element a drop-shadow which looks like it is lifted from the page. I’m doing this with the ::after pseudo-element, a css-transform, and a box shadow.

I’m using Mac OSX, Chrome (latest version) and Firefox 5. The results are

As you can see, there is a strange border-like artifact in the firefox rendering. The color of this seems to be linked to the body background color – as you can see in the second firefox example.

To do this I have the following code:

HTML:

<div class="card_container">
  <div class="card">
    <!-- Content //-->
  </div>
</div>

CSS:

.card{
  padding: 5px;
  background-color: #fff;
  border: 1px solid #aaa;
  height: 375px;
  margin-bottom: 20px;
}

.card_container::after{
  content: "";
  width: 210px;
  height: 10px;
  -webkit-transform: rotate(2deg); 
  -moz-transform:    rotate(2deg);
  box-shadow: 3px 3px 3px #4a4a4a;
  background-color: #4a4a4a;
  position:absolute;
  bottom: 20px;
  right: 8px;
  z-index: -1;
}

There’s some more CSS around, but I’m fairly sure I’ve played around enough to rule anything else out.

Any ideas why this is happening, if it’s platform/browser specific, and/or any fix? Thanks for any help!

Answer 1

:after is a tricky selector: you add an HTML element to your document, but you cannot manipulate its position freely. I suggest changing the HTML like this:

<div class="card_container">
  <div class="card">
    <!-- Content //-->
  </div>
  <div class="shadow"></div>
</div>

You have to add some the “shadow” div to every card elements in use, which might take some time.

Now for the CSS:

.card {
  padding: 5px;
  background-color: #fff;
  border: 1px solid #aaa;
  margin-bottom: 20px;
  height:100px; /* just for show, can be set to auto */
}

.card_container {
  width:210px;
  overflow-x:hidden; /* preventing the shadow from leaking out on the sides */
}

.shadow {
  width: 93%;
  height: 10px;
  /* rotation */
  transform:rotate(2deg);
  -moz-transform:rotate(2deg); /* Firefox */
  -webkit-transform:rotate(2deg); /* Safari and Chrome */
  /* shadow */
  box-shadow: 3px 3px 3px #4a4a4a;
  -moz-box-shadow: 3px 3px 3px #4a4a4a;
  -webkit-box-shadow: 3px 3px 3px #4a4a4a;
  background-color: #4a4a4a;
  border: 1px solid #4a4a4a;
  position: relative;
  bottom: 33px;
  left: 5px;
  z-index: -1;
}

This solution is not very flexible: you will need to adjust the shadow element if you change the card’s width (the wider the shadow, the less rotation, for instance).