A flexible shadow with background-size

by Annett

HTML

<div class="card-shadow">
  New elements now can be as width or narrow as they want.
</div>

<div class="shadow">
  Wonderful CSS3-card-shadow. Fully flexible. But no IE ...
</div>
 
<div class="shadow-gray">
  Same here, but this box is placed on a gray background, so the horizontal gradient should be gray as well.
</div>

CSS

.two-col-content:after,
.card-shadow:after {
  background: url(data:image/png;base64, foobar) no-repeat;
  bottom: -6px;
  content: ".";
  display: block;
  height: 6px;
  left: 0;
  position: absolute;
  text-indent: -9999px;
  width: 100%;
}
 
.fullsize-grid .card-shadow:after {
  background: url(data:image/png;base64, foobar) no-repeat center top;
}
 
.fullsize-grid .two-col-content:after {
  background: url(data:image/png;base64, foobar) no-repeat;
}

.shadow:after,
.shadow-gray:after {
  bottom: -7px;
  content: ".";
  height: 6px;
  position: absolute;
  text-indent: -9999px;
  width: 100%;
 
  background-image: -webkit-linear-gradient(left, rgba(255,255,255,1), rgba(255,255,255,0), rgba(255,255,255,1));
  background-image:    -moz-linear-gradient(left, rgba(255,255,255,1), rgba(255,255,255,0), rgba(255,255,255,1));
  background-image:     -ms-linear-gradient(left, rgba(255,255,255,1), rgba(255,255,255,0), rgba(255,255,255,1));
  background-image:      -o-linear-gradient(left, rgba(255,255,255,1), rgba(255,255,255,0), rgba(255,255,255,1));
}
 
.shadow-gray:after {
  background-image: -webkit-linear-gradient(left, rgba(205,205,205,1), rgba(205,205,205,0), rgba(205,205,205,1));
  background-image:    -moz-linear-gradient(left, rgba(205,205,205,1), rgba(205,205,205,0), rgba(205,205,205,1));
  background-image:     -ms-linear-gradient(left, rgba(205,205,205,1), rgba(205,205,205,0), rgba(205,205,205,1));
  background-image:      -o-linear-gradient(left, rgba(205,205,205,1), rgba(205,205,205,0), rgba(205,205,205,1));
}
 
.shadow:before,
.shadow-gray:before {
  bottom: -6px;
  content: ".";
  height: 6px;
  position: absolute;
  text-indent: -9999px;
  width: 100%;
 
  background-image: -webkit-linear-gradient(top, rgba(150,150,150,1), rgba(150,150,150,0));
  background-image:    -moz-linear-gradient(top, rgba(150,150,150,1), rgba(150,150,150,0));
  background-image:     -ms-linear-gradient(top, rgba(150,150,150,1), rgba(150,150,150,0));
  background-image:     ...