CSS Drop Shadows without Non-Semantic Code:

Associate
Joined
31 May 2005
Posts
2,179
Location
Alfreton,Derbyshire
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?
 
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"...
 
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.
 
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.
 
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.
 
Back
Top Bottom