Has anyone attempted drop shadows?

[mgb123]

Check out this link!

http://1976design.com/blog/archive/2003/11/14/shadows/

I was asking a friend who knows waaay more about css than I do, and he pointed me here.

I'm going to try to implement this in the pepper template if possible.

Has anyone already used this technique?

[Connie]

No, I never used this technique, but what is so difficult?

1) You must be sure that all your photos which you present at your main page have the same size

2) you must generate one and only one white image with that shadowy corner, the how-to is described in that tutorial

3) you must integrate that CSS into your template-CSs

let us know when you did it, would like to see it!

Connie

[mgb123]

I'd really like it if there was a way to have images that were multiple sizes.

My main goal is to get the drop working...but my secondary is to have vertical as well as horizontal images.

Is there a way (in the php maybe) to use a different drop shadow image based on the dimensions of the uploaded image?

I don't know php, and I can only really edit css so far. I'm trying to learn it as I go.

[er16004]

Correct me if I'm wrong, but you should be able to use this with any photo. You see, the background image, in this case the drop shadow itself, sits in the lower right corner of your photo. The background image will stretch the length of the container (the photo itself) as long as the background image is as large or larger than the photo. What does this mean? Say your photo is 640x480. If your background image is 640x480 or larger (800x600, etc.), then the background image will sctrech the full container width (or height). Now, doing it this way vs. having an exact widthxheight might give the shadow a little different look in each of the corners (the top right and the bottom left).

I haven't tried this, so it's just my theory. If I have some time today, I'll see if I can work up an example to test with.

[Joe[y]]

www.alistapart.com has a brilliant guide for this technique.

[er16004]

www.alistapart.com has a brilliant guide for this technique.

Just before the comments section on the link provided in this original post, Dunstan provides the links to both the AListApart article and a follow up article. Look for the links under this title:

Alternative methods

2003/11/14: I see that both Chris Hester and Tom Gilder have come up with their own solutions (very nice too), but while theirs rely on adding in six empty <div>s, this technique doesn’t require any additional markup, and that’s what I was aiming for.

2004/03/30: Sergio Villarreal has extended this technique (albeit by using extra markup) in an article on A List Apart. Phil Baines then took Sergio’s code and simplified it. It's worth taking a look at both of their explanations.

[mgb123]

Thanks for the heads up!

I can't wait to try these out after work!

[Anonymous]

Thanks for the heads up!

I can't wait to try these out after work!

BTW, the OnionSkinning technique should work as well: http://www.alistapart.com/articles/onionskin/