3. Notebook Paper

Chapter 2 was all about creating graphic effects without any graphics. In this chapter, we’ll use plenty of images, but new CSS3 properties allow us to use them with more streamlined markup and to make them behave in ways not possible with CSS 2.1. You’ll also learn how to use unique, non-web-safe fonts in your pages without resorting to Flash, images, or scripting—even in Internet Explorer. Altogether, we’ll be able to use these image and font techniques to make a web page look like a realistic piece of notebook paper.

What You’ll Learn

We’ll create the appearance of a piece of notebook paper using these CSS3 properties and concepts: The background-size property to scale a background image with the text Multiple background images on one element The border-image property to create graphic borders The background-clip property to move a background image out from under a border The @font-face rule to embed unique fonts in the page