Paper component

This component makes it easy to add realistic, three dimensional pieces of paper to a web page. Adding an effect, color, or padding size is as simple as adding one or more desired classes to a wrapping container like a div around any type of content. Combine 3d effect + color + padding size to achieve your desired look.

I use these with Bootstrap, as an alternative to Bootstrap's standard (slightly boring) "well" component. Bootstrap is not required though, you could use this in any web project, as it is completely self-contained. Works great in all modern browsers and on mobile, with graceful fallback in legacy browsers (such as IE8).

Included files: paper.min.css (4 KB minified CSS with vendor prefixes generated by Autoprefixer) paper.scss (200 lines of neatly commented code, including color variables) index.html (functional demo of all available styles) boostrap.min.css (just to neaten the demo page)

Please note that you may use these to build a website or theme for yourself or a client, but you may not use these to build a theme to sell or distribute for free (I plan on building such a theme myself :)