• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 3. Notebook Paper

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


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint