CSS drop shadows and

By JanBu on 21 Jan 2013 at 14:53 UTC

Hi all,

I need some help on this.

I am trying to make some drop shadows around an image.

I found this excellent page with code etc: http://nicolasgallagher.com/css-drop-shadows-without-images/
I have used this code in my local.css file:

.drop-shadow-rb img{
   position:relative;
   width:90%;
}

.drop-shadow-rb:before,
.drop-shadow-rb:after {
   content:"";
   position:absolute;
   z-index:-1;
   bottom:15px;
   left:10px;
   width:50%;
   height:20%;
   max-width:300px;
   -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);
   transform:rotate(-3deg);
}

.drop-shadow-rb:after{
   right:10px;
   left:auto;
   -webkit-transform:rotate(3deg);
   -moz-transform:rotate(3deg);
   -o-transform:rotate(3deg);
   transform:rotate(3deg);
 }

I wrapped the <img> in a <div> to get it to work. This is the HTML:

<div class="drop-shadow-rb" >
<IMG src="/sites/all/pictures/picture.jpg" >
</div>

The result is that the shadow is made for the <div> and not the <img>. When the image is smaller, the shadow is far to big. (You can see the result here: http://www.dacim.nl/node/46# (apologies for the Dutch)). n.b. in IES 8 (and earlier) nothing will show up.

How can I make this code work for the <img> only and not the <div>?

Any help very much appreciated. Thank you.

Jan

Comments

IMO, things like box-shadows

Anonymous (not verified) commented 22 January 2013 at 00:50

IMO, things like box-shadows and text-shadows and border-radius are so easy to do in modern browsers, that you should just use CSS3. Pretty much say anyone using an intelligent browser sees the web as it's intended...the rest (IE) can make do with what they get.

This is personally how I feel...I understand this is not always possible at a corporate level.

My advice would be to use the box-shadow property

.class img {
box-shadow: 0 0 3px rgba(0,0,0,0.35);
}

This is the basic box-shadow declaration, which I use quite often. The shadow is directly behind the element, with a 3px radius. RGBA is a color format (0,0,0 = black 0.35 = opacity)

You'll want to prefix this ( I use Sublime w/ Prefixr, so my code editor helps me out there.) w/ -moz & -o & -webkit and all that, but it's honestly the best way to keep your code clean.

You're basically able to do what you tried to do initially, but with much less work. You can play around with the length and distance of the shadow to create different effects, and you can even put multiple shadows on an element.

.class img {
box-shadow: 0 0 3px rgba(0,0,0,0.35), inset 0 0 3px rgba(255,255,255,0.55);
}

Would add the same outer box shadow, but also an inset white one.

There are a lot of neat effects you can accomplish. And seeing how all mobile browsers love CSS3, you can rely on it heavily in your responsive builds.