Web page "Paper Notes effect"

Question

I like the page parts which look like paper notes in this page, with the raised shadowed edges or corners. (What is this effect called?)

Is there a library of these similar paper notes effects I can download and use on my own sites?

Answer 1

This is done with a background image, not CSS or HTML.

Answer 2

Looking at the webpage, with Chrome's Developer Tools, it seems that they've achieved the effect using, something similar to:

<fieldset>

 <label for="one">Label one</label><input id="one" name="one" type="text" />
 <label for="two">Label two</label><input id="two" name="two" type="text" />
 <label for="three">Label three</label><input id="three" name="three" type="text" />

 <!-- 
    Other elements and stuff follow...
-->

</fieldset>

and the css, I'm approximating, because I can't see where the background-color's being set:

fieldset  {
    background: #80B8D2 url(http://visualrecipes.com/images/form-box-bottom.gif) bottom left no-repeat; }

The background: is shorthand form for the more verbose:

fieldset {
background-color: #80B8D2;
background-image: url(http://visualrecipes.com/images/form-box-bottom.gif);
background-position: bottom right; /* given in the form `Y` then `X` here, but typically, if using px/em...etc given using the form `X` then `Y` */
background-repeat: no-repeat;
background-attachment: scroll; /* not specified, above, but the default is scroll, with the alternative being 'fixed' */
}

I figure that if you couldn't rationalise how the effect was achieved, then you're probably new enough to CSS that you could benefit from a slightly exaggerated explanation as to how it works. Sorry if it seemed patronising, =)