Add shade to a picture

[Fysicus]

http://www.tartaros.be/spaze.be

As you can see I finally managed to center the image in the middle of the webpage. Now, the owner of the site wants me to add "shadow" to the image.

Anyone here have an idea how to do that? I suppose I also can do that in the CSS or am I posting in the wrong forum?

Thanx very much

[karinne]

Easiest way is to do it in a graphics software like Photoshop.

[alexgeek]

Originally Posted by karinne

Easiest way is to do it in a graphics software like Photoshop.

I'm really not sure but can things like this be done with those filters?
I'm probably wrong.
If you use photoshop I recommend you record the action and batch process all the pics in one.

[karinne]

Well ... there's only 1 image ... so ... why go through all the trouble of getting the filters right in IE and FF rather than just opining up PS and adding a simple style?!

[alexgeek]

Ahh point taken
i don't really understand filters so i'll shup

[Fysicus]

The problem is that it's only supposed to show if the resolution is larger then 1024x768.

So I was wondering if it could be done. If not with CSS perhaps with a scripting language like php?

[alexgeek]

Originally Posted by Fysicus

The problem is that it's only supposed to show if the resolution is larger then 1024x768.

So I was wondering if it could be done. If not with CSS perhaps with a scripting language like php?

yeah i think it can be done
i think it would require you to create two of every image though.

[karinne]

Originally Posted by Fysicus

The problem is that it's only supposed to show if the resolution is larger then 1024x768.

Why!?

Is it just going to be that one image you have?

[AdRock]

I use this css and add a couple of images (attached)

Code: Select all

 
.img-shadow {
  float:left;
  background: url(images/shadowAlpha.png) no-repeat bottom right !important;
  background: url(images/shadow.gif) no-repeat bottom right;
  margin: 10px 0 0 10px !important;
  margin: 10px 0 0 5px;
}
.img-shadow img {
  display: block;
  position: relative;
  background-color: #fff;
  border: 1px solid #a9a9a9;
  margin: -6px 6px 6px -6px;
  padding: 2px;
}

and I put the image in a div

HTML: Select all

<div class="img-shadow"><img src="yourimage" /></div>

[AdRock]

Those images didn't upload too well so herei s the zip