Post #265

CSS drop shadows, extended

4th March 2004, lunch time | Comments (25)

Shadow of Dunstan and a dog

I suppose I ought to point out, to those who don’t yet know, that my drop shadows technique has been extended and published on A List Apart.

Sergio Villarreal has done a great job, albeit by using additional markup, of increasing the browser-compatibility range, and adding in a host of extra wee bits.

Take a look in the article discussion forum for some good reader comments and suggestions for improvement. With the exception of a few stupid remarks (such as Discuss this article. OK then. Here’s a good tip — don’t use drop shadows on your web pages.) it seems to have been well received.

Jump up to the start of the post

Comments (25)

Jump down to the comment form ↓

  1. Sian:

    Hey hey hey you :) well done!

    Now, when are we going to see the re-appearance of Superman Naked Dunstan Technologies?

    Posted 1 hour, 13 minutes after the fact
    Inspired: ↓ Dunstan, ↓ David House
  2. Ryan Brill:

    Kinda cool that someone would write up an ALA article about a technique that you first introduced, eh? ;)

    Posted 1 hour, 18 minutes after the fact
    Inspired: ↓ Dunstan
  3. Dunstan:

    He's there isn't he? On the right?

    Or do you mean, when am I going to make something new?

    I've got a couple of cool things in the wings, but I'm waiting for a very kind person to do some JS coding for me, and until that happens, I'm stuck.

    But thanks for the hey-hey's :o)

    Posted 1 hour, 19 minutes after the fact
    Inspired by: ↑ Sian
    Inspired: ↓ Sian, ↓ David, ↓ David House, ↓ Scott Johnson, ↓ Sian
  4. Sian:

    When I mouse over Naked Dunstan Technologies it no longer shows the Superman costume :(

    Posted 1 hour, 27 minutes after the fact
    Inspired by: ↑ Dunstan
    Inspired: ↓ David House
  5. David:

    Perhaps a CSS Drop-Clothing technique? And yet your character adds clothing, hmm... I like how the figure blushes when focus is sent his way; he gets more color in his skin and then proceeds to put on his clothes, shoes first. :)

    Posted 2 hours, 14 minutes after the fact
    Inspired by: ↑ Dunstan
    Inspired: ↓ Sian
  6. Kevin Feely:

    The Nekkid Dunstan works in Firefox but doesn't appear to work on IE6.

    Posted 3 hours, 32 minutes after the fact
    Inspired: ↓ Sian, ↓ Dunstan
  7. David House:

    Works for me. Sian: what browser? IE won't work it.

    Posted 5 hours, 32 minutes after the fact
    Inspired by: ↑ Sian, ↑ Dunstan, ↑ Sian
    Inspired: ↓ Sian
  8. Scott Johnson:

    What kind of Javascript work are you waiting on Dunstan? Are you waiting for a particular person or just some random volunteer?

    Posted 9 hours, 50 minutes after the fact
    Inspired by: ↑ Dunstan
    Inspired: ↓ Dunstan
  9. Phil Baines:

    Hmmm, who cares about IE?? Only kidding.

    Dunstan; I did a little follow up to Sergio's article. you have probably seen it from the discussion. But if not;

    It uses posistion:relative instead of negative margins to get the drop shadow in block elements. And it then only needs one background image on block elements.

    As far as I can see, the image technique is the same as yours. I have linked here from the article.

    It was quite funny, because on the day that the article appeared on ALA, I had just been browsing this site (looking at your post on the same matter), and over at also as research into it. Then it appears on ALA. All on the same day! Then I wrote the tester page.

    Anyway, good work. I am hoping to get an article onto ALA sometime myself. I just need to find something to write about. hee hee.

    Posted 9 hours, 53 minutes after the fact
    Inspired: ↓ Sian, ↓ Dunstan
  10. Sian:

    Humph. You're right, it's broked in IE6, another first for Dunstan, I'm now using Firefox to look at his site, and only his site. I think Dunstan would look good nekkid apart from a Tutu.

    Posted 10 hours, 28 minutes after the fact
    Inspired by: ↑ Dunstan, ↑ David, ↑ Kevin Feely, ↑ David House, ↑ Phil Baines
    Inspired: ↓ Phil Baines, ↓ Dunstan
  11. Dunstan:

    Scott, I'm waiting for Andrew Heyward [1] to develop his table sorting code. He was very kindly taking some personal time to add in some features for me, and as with most "Sure, I'll do that this weekend" work, it's taking a long time.

    I guess people's 'spare' spare time is scarce. I know mine is.

    [1] though the table-sorting page seems to have vanished.

    Posted 10 hours, 48 minutes after the fact
    Inspired by: ↑ Scott Johnson
  12. Phil Baines:

    So why do you prefer IE over firefox normally?

    I dont want to flame or anything. Everyone is entitled to their choice of browser.

    I'm just interested.

    Posted 10 hours, 55 minutes after the fact
    Inspired by: ↑ Sian
    Inspired: ↓ Sian
  13. Dunstan:

    Phil, I saw your post on the forum, and your code looks great - the lack of extra markup is spot on, that was my main aim, so it's nice to see you stuck with that as well.

    Well done, sir :o)

    Write to Paul at the css vault and ask him to link to you in the resources section!

    Posted 10 hours, 55 minutes after the fact
    Inspired by: ↑ Phil Baines
  14. Dunstan:

    Actually Sian, I think you must have visited my site using FF before, because Naked Dunstan has never worked in IE - that bit uses the sliding doors technique, which isn't IE-friendly.

    IE doesn't do :hover on anything except links...

    And, you know, the site really does look much nicer in a compliant browser. I pretty much ignore IE to be honest - as long as things are still readable, I don't pay it an awful lot of attention. I tend to not deliver the 'fancy bits' to IE rather than spend ages figuring out work-arounds.

    You'll get a much nicer experience if you visit in FF :o)

    Posted 11 hours, 1 minute after the fact
    Inspired by: ↑ Kevin Feely, ↑ Sian
    Inspired: ↓ Sian, ↓ Koto
  15. Dunstan:

    Very cool.

    It would have been even cooler if I'd done it myself, of course... but never mind :o)

    Posted 11 hours, 3 minutes after the fact
    Inspired by: ↑ Ryan Brill
  16. Sian:

    Dunstan: I did visit with FF as I downloaded and tested it out when John Hicks announced that he'd worked on the logo for it. I dabbled briefly with it's predecessor but got fed up with the tabby things at the top.

    Phil: Habit. IE has always been my main browser of choice since 1997, with me using others purely to test. It does everything I want it to (apart from seeing Nekkid Dunstan in red socks :0)

    Posted 11 hours, 18 minutes after the fact
    Inspired by: ↑ Phil Baines, ↑ Dunstan
    Inspired: ↓ Dunstan
  17. Dunstan:


    Well those tabby-things are the best thing I've ever used on a web browser. I love them. I didn't used to, but FB changed my mind, and now I can't imagine life without them - non-tabbed browsers drive me bonkers now :op

    Anyway, thank you for visiting, which ever browser you use.

    Posted 11 hours, 27 minutes after the fact
    Inspired by: ↑ Sian
  18. Chuckg:

    One thing that still kills me about IE is that you can't use the img-dec is that you can't have text underneath without IE flipping completely out. I spent 2 hours trying to do workarounds and what have you and just gave up entirely. I love my opera, but god (not the capitol G!) it's near impossible to teach ppl that IE is satan-spawn.

    Posted 21 hours, 27 minutes after the fact
  19. Ben:

    Just wanted to say thanks.

    Stopped by today because I remembered your sweet little drop shadow technique and wanted to see how it was done... and there was your post about ALA. Synchronicity, and I'm not the only one. Planets must be aligned or something. Anyway, nice work!

    Posted 1 day, 8 hours after the fact
  20. Chris Hester:

    "IE doesn't do :hover on anything except links..."

    This got me thinking. Maybe you could make the image a fake link? (Eg: just a hash in the href.) Then would it work for IE?

    If not, well rollovers have always been made to work in IE for menus, so I'm sure you could solve this one.

    Myself I would swap the images round. Who knows there is another (better) image there unless they hover? Or make it an animated gif, with each figure appearing slowly.

    Posted 4 days, 7 hours after the fact
  21. Mo:

    Hey I have a question on the css shadows; I have a blue background on my site and I want to make a shadow for the pictures I present. The thing is if I use your shadow its not going to look right since it's on a blue background. How can I make a shadow to go with my site?
    thanks in advance

    Posted 4 days, 8 hours after the fact
    Inspired: ↓ Dunstan
  22. Dunstan:

    [1] Open up Photoshop.
    [2] Create an 850x850px file.
    [3] Fill the background to the colour of your site background.
    [4] Create a new layer.
    [5] Draw an 800x800 square in the middle of the this layer (using the Rectangular Marque Tool).
    [6] Fill it the same colour as your background.
    [7] Select 'Layer > Layer Properties > Blending Options' and add in a drop shadow for that square.
    [8] When you're done tweaking the shadow, trim your document so the blank space either side is trimmed, and you're left with something that looks like my dropshadow image.

    Just be sure that the width of your shadow matches mine, or the CSS won't produce a perfect fit.

    Posted 4 days, 9 hours after the fact
    Inspired by: ↑ Mo
  23. Mo:

    Thank you very much ! I got it to work!

    Posted 4 days, 15 hours after the fact
  24. Koto:

    In fact, IE can do :hover on all elements, it just needs some tweaking, namely including a behavior file - see , and linking it to the body style declaration in CSS. After that, you can use :hover pseudoclasses , and IE automagically supports it.

    Works for IE5x,6/Win, don\'t know about Mac.

    You can see it in action there:

    Cons? CSS won\'t validate - at least not for me.

    Posted 1 week, 6 days after the fact
    Inspired by: ↑ Dunstan
  25. Bill:

    I've just started fooling with css and I have to say I am amazed at what you can do with you come up with drop shadows too? Sweet! I was happy just to clean up my html a little.

    Posted 1 month, 3 weeks after the fact

Jump up to the start of the post

Add your comment

I'm sorry, but comments can no longer be posted to this blog.