ZooiblogScrolling Drop Shadows
- Jens Meiert
- Neutrino
- solverat
- jesse
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!
