CSS3 Box Shadows

HTML & CSS
1

I’m enjoying the use of CSS3 but am having trouble getting CSS3 Shadow boxes to work well with an image block with the class ‘imageleft’.

I’m using this:

.imageleft {
  position: relative;
}
.imageleft:before, .imageleft:after {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:131px;
  -webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.7);
  -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.imageleft:after {
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

The results: I see no shadow. Just the image itself.

I’ve seen results of the method on other sites (http://www.red-team-design.com/how-to-create-slick-effects-with-css3-box-shadow) and think it’s rather slick, but I would like to get it to work myself.

2

It would be good to see your HTML and the rest of your CSS. Is the image inside a div that is clipping it, for example?

3

Hi,

You can’t apply generated content to an image as there is no content in the image (apart from the replaced image itself).

You will need to wrap a div around the image and apply the shadow to that instead.

e.g.


<div class="imageleft"><img  src="img.jpg" width="300" height="300" alt="Sea"></div>

The div will need to be floated or otherwise sized to fit the image.

4

Okay, I’ve made some modifications, but I still don’t see the shadow:

<div class="imgshadow"><img width="131" height="165" src="/larryhamilton-new/images/headshotlookingaway2.jpg" alt="Larry Hamilton"></div>

div.imgshadow {
	border-radius: 4px;
	padding: 0 0 2em 0;
	position: relative;
	width: 131px;
        float: left;
}
div.imgshadow:after {
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}
div.imgshadow:before, div.imgshadow:after {
	background: 0 0 rgba(0,0,0,0.7);
	bottom: 15px;
	box-shadow: 0 15px 10px rgba(0,0,0,0.7);
	content: "";
	left: 10px;
	max-width: 200px;
	position: absolute;
	top: 80%;
	transform: rotate(-3deg);
	width: 50%;
	z-index: -1;
}
5

It’s working for me but you don’t really want a background colour on the shadow element do you?

Put up a live example if you are still struggling so we can link to the image for a live example. remember this only works in the latest browsers so won’t work in IE8.

6