CSS Drop Shadows without Non-Semantic Code:

n30_mkii · 16 Nov 2007 at 20:10

As title I am currently building a gallery for my photographs and would like to use a small drop shadow on thumbs usng css.

I have seen a few solutions such as the onion skin approach, which gives a great looking shadow, but would like to implement a refined solution if possible.

I dont want to add to much (if any) random divs to my page, but would like to produce a decent shadow. any ideas on how I should do it?

Shoseki · 17 Nov 2007 at 12:46

meh, not a big fan of the effect.

SiriusB · 17 Nov 2007 at 20:28

Hardly a useful post, was it?

n30_mkii · 17 Nov 2007 at 20:41

I think I've found a solution i'm happy with but thanks for the help.

monkeysmith · 17 Nov 2007 at 20:43

Have you tied this, think it uses Divs though.
http://www.alistapart.com/articles/cssdropshadows

How about a right and bottom border, might look ok?

Sic · 17 Nov 2007 at 20:54

SiriusB said:
Hardly a useful post, was it?

ironic? Shoseki's entitled to offer his opinion, whether it's irrelevant to the thread or not

Shoseki · 17 Nov 2007 at 21:09

Sic said:
ironic? Shoseki's entitled to offer his opinion, whether it's irrelevant to the thread or not

Hmmm... but whether I should have the right to post my opinion on a public forum...

If someone posted a thread saying "I want to make an all Flash links section of website, how do I do it" I can bet you will get a lot of people saying "flash links are bad mmkay"...

SiriusB · 17 Nov 2007 at 21:30

There's a difference between something which is bad practice and an effect.

He asked for help on how to achieve an effect. And you came out with "I'm not a big fan". Like I said, hardly useful.

Not going to turn this into an argument so I'll leave it there.

Shoseki · 18 Nov 2007 at 03:47

SiriusB said:
There's a difference between something which is bad practice and an effect.

He asked for help on how to achieve an effect. And you came out with "I'm not a big fan". Like I said, hardly useful.

Not going to turn this into an argument so I'll leave it there.

Like I said in my post, if I asked how to make all my links flash based, I would be asking *how* but in return would probably be receiving *advice* and *opinions*.

I could argue, that as CSS doesn't have a native technique for acheiving shadows, using divs / document hacks breaks the semantic model of the document and is bad practice. But I didn't, I just expressed my distaste for it.

"hi, I'm thinking of turning my beautiful wife into pies, can you tell me how to do that?"

"That would be a stupid thing to do."

"Now come on, thats hardly a helpful comment is it? He doesn't care whether you like the idea, he just wants to know the technicalities of acheiving the required goal."

"Meh"

Nowhere in the FAQ does it say, that every post must be *useful*. Considering how well badly sourced stereotypes abound on these forums, I'd hardly take anyones word as gospel.

simisker · 18 Nov 2007 at 05:02

If the thumbnails are all the same dimensions, then you could just make a translucent drop-shadow PNG of similar dimensions, then have a container div that's wider and taller than the thumbnail image within, and have the drop-shadow as a no-repeat background image of this div [offset positioned as desired]. Of course, there's fun to be had with IE non-handling of translucent PNGs as background images, but some conditional comments would provide IE with a suitable alternative.

It's not the most refined [that's CSS 3 drop shadows], and the big caveat is that the thumbnails all have to be the same size, but it'd work. In my mind. At 5am.