Discuss: Onion Skinned Drop Shadows

by Brian Williams

21 Alas! My master plan is foiled!

And I thought I had cornered the Drop Shadow market! If it hadn’t been for those meddling kids and their dog, I would have made it, too!

But anyway, great work! Two minor notes:

– You can avoid having to use classes for the inner divs by using descendant selectors like: .shadow div div {… – If you want to add a frame/border to the image (like the previous techniques used) you’ll need to add another div around the image ;-)

posted at 03:00 pm on May 21, 2004 by sergio

22 Float left giving me trouble

I am pretty new to css, and have been diving head first into learning it. As a flash/php programmer, I give huge credit to those of you who are using it well, it’s a tricky art no doubt. My question is this… I’m trying to place the image wrapped in divs inside of a TD, and center align it… I’m having no luck trying to do so… nothing I do stops it from aligning to the left ( I assume the float is forcing this) …
Sorry if this is newbie question… and thanks for any help in advance.

posted at 03:58 pm on May 21, 2004 by Michael

23 Try this:

Float the surrounding div left and apply these styles to the img (or any block):
margin-left:auto;
margin-right:auto;

posted at 08:11 pm on May 21, 2004 by mh

24 hmmm

http://www.contentisdead.com/gallery/
I don’t see how that would work… not sure what I’m missing… I have it setup just as in the example.. 3 divs..
surrounding those divs in my page is a TD.. and I want to center the whole 3 div block..
What surrounding div are you saying to float left? and would that not produce the same results, as the outer of the 3 divs is float left…
thanks

posted at 08:49 pm on May 21, 2004 by Michael

25 re: Float left giving me trouble

michael –

i think just getting rid of the float: left on wrap1 should take care of your problem.

posted at 09:43 pm on May 21, 2004 by seth

26 Let's add another div!

The problem with this is that 1) the size of the box is constrained by the height and width of shadow.gif, and 2) since shadows don’t run-length-encode well, shadow.gif becomes a 10- or 20-kilobyte file even if the box isn’t large.

So let’s add one more div, and rather than drawing the sides with one big square GIF, have little repeating GIFs draw the right side and the bottom.

Now the box can resize to any width and height, and the total aggregate size of the GIFs is about 2K.

I’ll leave the HTML and CSS as an exercise for the reader – it’s pretty obvious.

posted at 11:45 pm on May 21, 2004 by Nic Wolff

27 extremely interesting.

css 2 – here we come!

posted at 12:40 am on May 22, 2004 by mixin visuals

28 Zac

Good work, just started on my own JS for that, the only thing you might want to do is to cloneNode() the image instead of creating a new one. That way you can keep all the image settings like alt and title.

posted at 03:35 am on May 22, 2004 by Chris

29 Losing the divs

Thought: imagining every browser supports CSS3 to its fullest, could the same thing be done with ::before and ::after? (note: we can’t use the CSS2 version, :before and :after, as you can’t set [code]display[/code] values on those).

posted at 04:13 am on May 22, 2004 by David House