Drop Shadows for images in CSS?

[imacbarb]

I'm totally new to CSS and would like to know if there is some way to make drop shadows appear on all the images? An example can be found on my main page, Barb's Studies Gallery, the eggs. I added the drop shadow with Photoshop Elements 2, but it takes way too long to re-do all of my images. I'm hoping there is a shortcut with CSS; I think it adds some visual interest to the page. Thanks for your help.

Barb

http://www.pbase.com/imacbarb

[srijith]

As such there are CSS tricks that can be used to create drop shadows. However most of them depend on being able to add new divs and classes to the actual HTML (which Pbase does not allow). However there might be some tricks that might work with existing HTML. Here is a lost of tricks I have found

- Onion Skinned Drop Shadows
- CSS Drop Shadows
- CSS Drop Shadows 2 - Fuzzy Shadows

[robert]

Barb:

Another idea would be to upgrade to Photoshop CS and automate the dropshadow frame with an action. That's what I do. Then, the action runs in about 1 second.

Doing it with a CSS is going to be very troublesome.

Robert

[oochappan]

Code: Select all

img.thumbnail {
filter: progid:DXImageTransform.Microsoft.Shadow(color="#222222",Direction=135,Strength=5);
}

create new css for Barb's Studies Gallery ( copy css from main page and add this code .....undo ps-shadow)
info http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/reference/filters/shadow.asp
PS u can add same shadow to ur full picture by adding same filter to img.display { ...... in ur new css ( only working in IE5.5/6 )

[imacbarb]

srijith thanks for the links to the tutorials; looks like I have some reading to do. I do have another question for you since you are the moderator. How can I increase the size of the thumbnails without them becoming pixelated, or is that not allowed?

Robert, I know PSE2 inside-out and maybe it's time for an upgrade to Photoshop CS. I'm trying to justify the pricey upgrade...writing my own actions would be nice. I recently took a few PS CS books out of the library to convince me that I <i>really</i> need it. PSE2 has, surprisingly, served me <i>very</i> well up to this point, mine has all the add-ons available.

oochappan I tried what you suggested, but I am using Internet Explorer 5.2.3 for Mac and I think the drop shadow filter will only work with IE 5.5 or later. Unless of course I didn't insert the code in the proper area, which is always a possibility with me! It would be great if I could get this to work, but I was also wondering if it'll only show for viewers using Internet Explorer as their browser? I appreciate your help.

Thanks again everyone,
Barb