Zooiblog

Search the Zooiblog

Follow the discussion below and participate.

Support this site.

Scrolling Drop Shadows

The code behind it is very simple, but it requires two (2) divs. I started thinking about them. What could I do with two empty divs at the top and bottom of the page… Skip links, that stuff. Maratz has it covered. So the divs have a meaning. That’s at least something. Off goes the tutorial. For the more progressive ones, the result looks like this.

The graphics

Start your favourite professional graphics suite. It’s a matter of taste, but try to create light shadows. Heavy shadows (0% to 100% black) are ugly, so go for something more blending in. Aim for something like this.

Make sure your layout is fit for some drop shadows, cause there are occasions where a drop shadow just breaks the aesthetical feeling and the overall look. Handle with care.

The markup

The markup is simple, but it does require two divs that actually aren’t totally useful. For this situation, we’re using them anyway. Example: <div id="topshadow"> <a href="#content"> </a> </div>. Put in the divs whatever you want, but please, enter something or I’ll have the Semantics Police hunting me down in just moments from now.

The (funky) CSS

#topshadow {
	position: fixed;
	top: 0;
	left: 0;
	background: url(./droptop.png) repeat-x 0 0;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 15px;
}

And of course, hide all the anchor elements with text-indent: -9999px;.

What about (crappy browser’s name here)?

Sorry, but your crappy browser doesn’t support PNG image files. Please download a reasonable alternative and come back. Thank you.

I’m sorry, IE users, but all ends for you. Download a better browser.

* html #bottomshadow, * html #topshadow {
	display: none;
}

Of course, if you know any better hacks, please do use them. This was the best I could think of.

For you out there not understanding the above code, the star html hack is a CSS hack that allows you to do IE-specific things. IE is the only browser that thinks html itself is contained by another element, and thus * html seems logical to IE to read and parse. In this case, I hide the PNG images, since IE doesn’t understand the transparency goodness.

Conclusion

The file to which you should refer to grab code and rip of the PNG is located over here. Show me your best stuff :)

This is one heck of a tasty technique, but please, use it in a good context. It’s not for every design (far from it), but it continues to leave me with a good feeling, about depth and smoothness :]

Note to the Semantics Police

Anyone know if this is possible with :before and :after, or even some other odd CSS feature? It would make this technique blend in even more, and keep the document semantic. Go ahead, tell me.

Pretty late addendum, but this technique is in use: Marko (who invented it but didn’t want to give away his secrets so I had to do it myself anyway!) and Jina, who uses it beautyfully. It made some gallery sites!

50 comments

  1. Hey, that’s a pretty cool effect. I’ve only seen it like once before on a website. text-indent: -9999px; looks a bit funky indeed, but hey --- it works!

    I’m off to play around with it some more now. I’ll let you know if I find something interesting.

  2. I’m gonna hold you to that promise ¡)

  3. ¡)

    Hell yeah :)

  4. Like a wink, but then somewhat twisted.

  5. Too bad the CSS is so messy...

    And damn, I remember this article regarding styling blockquotes using :before and :after, which might help us out, but I can’t find it ATM! Roar.

  6. CSS messy? Not my best CSS, but messy?!

    And I think you are referring to Dive Into Mark...

  7. By “messy” I mean #there { arent: any } .linebreaks {} --- CSS gets messy quite quick for me, as I’m editing it that little Web Developer Toolbar window...

  8. You should’ve pointed that out, my code is schplondid.

    Anyways, is there no way to do this with :before and :after?

  9. There is. I mean, there must be. Just can’t find it... for now.

  10. you, dear sir, are a genious. i am so stealing this. ;)

  11. I have to say that I agree with Jina - this is a most cool idea.... I’m definately going to have to start reading your blog more often if you come up with ideas such as these.

    -Shade

  12. It’s confusing whether this is possible with :before and :after.

    Some user agents (Firefox, I think) won’t allow :before and :after to take position, presumably because it assumes you want the CSS2 versions when only using a single colon.

    So, this is how you’d do it with CSS3:

    html { position: relative; }
    body::after { position: fixed; /*etc.*/ }

  13. ...but please, enter something or I’ll have the Semantics Police hunting me down in just moments from now.

    By the way, that doesn’t make sense. Useless (read: content-less) div elements are pretty awful semantic practice no matter which way you look at it. Putting a single a tag in it doesn’t help :)

    Also, the XML man inside me cries at your un-wellformedness: please close that a tag in your example! :)

    Mini-rant over.

  14. David, the anchor tag is just a placeholder. Of course you should stack it up for at least a couple of kilobytes :P Of course it isn’t much better, but I’m leaving a lot to you readers out there to figure out what to put in it. If you’re right about ::before, then nobody’s worried about extraneous and unsemantic markup. For now, you should have to make a compromise.

    BTW, I tried the ::before a little, but it didn’t work. I’ll try it later on, but for now, I’m busy with other stuff.

    And the a tag is now closed. Hey, it’s hard to write code with &lt; et al.

  15. Holy shades Batman, that rocks!
    I actually managed to get the shade effect working in IE but couldn’t get it working for Firefox, if you look closely and compare the shade effects in IE and Firefox here you’ll see that the reels have shade in IE through an IE only style. I only need to fiddle a png in there and I’m finally done. (btw, turn on your speakers when trying the gadget)

  16. Rob, Try putting a hyperlink somewhere within the text and then scroll it just under the PNG file... bad news :(... I tried something like this also... I have a fix if you are interested.

  17. I know about the anchors. I thought, when people use moderately sized shadows, you’ll hardly notice.
    Mail me the fix if you like. I do.

  18. yes! send the fix please!

  19. Okay as far as I have tested the basic is this:

    a{
    position:relative;
    z-index:100;
    }

    As far as I tested thus far this makes the a take scroll over the top of the PNG (change z-index to suit) and keeps is clickable. It has a pretty neat effect on some experiments I tried but whether it has any real world use remains to be seen! :)

  20. Sorry about the typo... that should read...

    ...makes the anchor tag scroll over the top...

  21. it’s clear, I’ll try it. Thanks!

  22. Thanks. I thought about that, but forgot :D

    Let’s hope I didn’t make the shadow divs z-index 999 :P

    Thanks John, your input is appreciated.

  23. well... were all awake here aren’t we?

  24. I haven’t tested (neither readed the full article) yet but, why don’t you use generated content (:before and :after) instead of an empty div? IE does not support it, but, that’s not a big problem.

  25. Sorry. I misundertood your project. I can’t help you with :before and :after.

  26. I used this exact technique on the old design of my blog (no longer live). It worked great (in the non-crappy browsers) and looked smooth to boot. :)

  27. It would seem to me that we could just use #topshadow *, #bottomshadow *{display:none;} As a more generic method to hide things in those divs instead of negative positioning, or speicifically hiding the a tags.

  28. The * is a good idea, but using display: none; hides it from screenreaders too, and that’s not the idea of the links.

  29. a simple bandwidth question: since IE cannot display the dropshadows at all, would not it make sense to change the background to no image in the IE specific css before not displaying the div? I know the image is small in this case, but it would be a good habit in my opinion.

  30. The solution is simple—of course one should avoid empty div’s. And of course one has “skip to content” div’s, which are not doing anything if a page is styled. Top and bottom “skippers” should be outside #container (or whatever it’s called), so they could be absolutely positioned as hooks for the shadows.

    &#60;body&#62;
       &#60;div id="topSkipper"&#62;skip link list...&#60;/div&#62;
       &#60;div id="container"&#62;Here goes the content&#60;/div&#62;
       &#60;div id="bottomSkipper"&#62;skip link list...&#60;/div&#62;
    &#60;/body&#62;

    and CSS:

    #topSkipper ul, #bottomSkipper ul {
       text-indent: -9999px; }
    /* the rest as explained already */
    

    There it is—markup clear : )

  31. Ptr: it would indeed be a good habit, but I’m not sure if IE actually does download it. If it does, well, then it should be done.

    Marko: of course, but I have some problems ATM with it. If you look at the code, you might see that it isn’t optimal. I seem to have problems with the z-index, though setting it didn’t change anything the last time I tried.

  32. kick ass drop shadows and favorites JS code

    Drop shadows that scroll over your content, fixed onto the browser window!

  33. Great stuff! Regarding IE6, something that I was just having a play with:

    Notice that I used the same image for the two backgrounds: it’s simply a flat grey 15×15 pixel image - the IE filter does the rest.

    Have a play!

  34. ... and don’t forget to comment out

    • html #bottomshadow, * html #topshadow {
      display: none;
      }

    from the original CSS! :)

  35. That’s a lot of code Stuart. Great work. I’ll implement this into a revised example soon, and put the link up here. Thanks for checking that out.

  36. if it’s all for hiding from IE then why not use the attribute selector to set the dropshadow and then set display:none; using a selector that IE understands?

  37. Erik, it’s for making the effect actually WORK in IE6! :)

  38. Sorry Stuart, I wasn’t referring to your solution, but Robs article.

  39. That’s not what the article is about. It’s about tasty drop shadows (or everything, really), and hiding it for IE is as fail-safe as needed. So the attribute selector isn’t needed at all.

  40. Huh. Only skimmed the article, but also suspect the “Semantics Police” to be very watchful here ;)

    Regarding the “topshadow” rule - you only need a “background: url(./droptop.png);” declaration, as far as I see, so without any horizontal repeat and background positioning. Why? The background image will start at “0|0”, and since both container and image are 15 pixels high, there will be no problems at all. Ah, and both your “drop” PNGs just asked me why they ain’t only one pixel wide.

  41. Wow, Jens. Eight months! :D

    Anyway. Fair point about the topshadow. Oh well. Now, the PNGs. A friend of mine once discovered that the CPU had a lot of work filling a wide screen with 1px-wide images, so I make them a bit wider to be safe. Not everyone’s above the gigahertz!

    Now, did you come here because of the WSG mention? Russ is a quick boy! ;)

  42. Hey Rob - yeah, guess it was Russ’ up-to-date reference, lol. This is fun ;)

    Best regards!

  43. Now only to get the bottom shadow working:
    http://www.braincast.nl/css/shadow/
    (Only tested in Firefox and Explorer!!)

  44. Explorer 6 that is!!

  45. [...] Drop Shadows wg:Fun with Drop Shadows En la ventana del navegador (fija haciendo scroll): Scrolling Drop Shadows | Zooiblog

    « Anterior: Chuletas o [...]

  46. “Sorry, but your crappy browser doesn’t support PNG image files. Please download a reasonable alternative and come back. Thank you.

    I’m sorry, IE users, but all ends for you. Download a better browser.”

    WTF? Are you creating websites for browsers or for people?

  47. WTF? Are you creating websites for browsers or for people?

    Ah, be careful what you say. When I hide a subtle extra for a group of people that doesn’t support it, I don’t think I’m harming anyone. Besides, if your site depends on a few shadows, you’ve taken a wrong road somewhere.

  48. mm.. for IE users: (switch today!)

    for all others, maybe u can try this:

    the new (funky) CSS:

    #topshadow {
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 15px;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’./droptop.png’);

    }

    .topshadowpng{
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    background:url(./droptop.png) no-repeat;
    width: 100%;
    height: 15px;
    }

    to integrate:

    div id=”topshadow”>

    i think, it also works on firefox and other friendly browsers. but, I did not test it, so: good luck! :P

    greets from Austria

  49. okay. i did it.

    you can have a view on

    http://presslaber.solverat.com/beta

    it works on Firefox AND Internet Explorer.

  50. I like your advice, but i have a problem with png and gif images repeating when i scroll in the new safari browser.

    http://ushempco.com/jared/jared/index3.html

    if you scroll in the main iframe there, you get a bunch of previously rendered images.

    thanks!

Participate, yes!

(Rock out with Textile; it's what the cool people use!)