CSS3 - Using :after psuedo selector to create a shadow on an element.

After-Selector-Shadow.css

/*
Used :after psuedo selector to create a shadow on an element. I did this instead of just box-shadow on the element , because I wanted the shadow slightly more narrow than the element.

Depending on your styles, the shadow will look something like this: http://cl.ly/2fua



*/
.bottom {
  background: rgb(254, 243, 216) url(../images/background.png) top left repeat;
  -moz-border-radius:	 0 0 6px 6px; /* FF1+ */
  -webkit-border-radius:	0 0 6px 6px; /* Saf3+, Chrome */
  border-radius:	0 0 6px 6px; /* Opera 10.5, IE 9 */
  position: relative;
}

.bottom:after {
  content: '';
  width: 944px;
  height: 10px;
  left: 3px;
  bottom: 0;
  margin: 0;
  z-index: -1;
  position: absolute;
  -moz-border-radius:	 0 0 6px 6px; /* FF1+ */
  -webkit-border-radius:	0 0 6px 6px; /* Saf3+, Chrome */
  border-radius:	0 0 6px 6px; /* Opera 10.5, IE 9 */
  -moz-box-shadow: 0px 5px 6px rgba(0,0,0,.4); /* FF3.5+ */
  -webkit-box-shadow: 0px 5px 6px rgba(0,0,0,.4); /* Saf3.0+, Chrome */
  box-shadow: 0px 5px 6px rgba(0,0,0,.4); /* Opera 10.5, IE 9.0 */
  clip: rect(0 950px 30px -3px);
}