While working on some UI design today, I wanted to introduce a CSS effect where one div would scroll underneath another, with a nice shadow effect. Nothing new, you can get an idea right from the thumbnail here to the left, or following the link to the demo. I googled hoping to quickly find some ready made CSS to copy but couldn’t find it, so I decided to write a simple HTML page on my own to reproduce it. UPDATE: Published the code as a gist.

In the end, I ended up adding a few fancy details to the final page: some webfonts to make the page look like a scribbled sketch, and arrows made out of bezier splines in a canvas tag to make the scribbling more realistic. It went past its original purpose of testing a Css “scroll underneath” effect, but it’s nice to look at.

You can see the final demo page here.

Obviously, it’s all just plain html, css and js. Here below I’ve attached a screenshot, in case your browser doesn’t render it nicely as my one (I didn’t bother testing it on too many variants).

P.s.: the trick for the scroll effect to work properly is to mark the header element with position: relative. This will make the box-shadow fall nicely and the content below it slide underneath the shadow when scrolling. Playing a bit with overflows and box-shadow parameters will help in trimming the shadow blur, so it won’t appear on the sides of the header and footer elements.