tailieunhanh - The CSS Anthology: 101 Essential Tips, Tricks & Hacks- P6

The CSS Anthology: 101 Essential Tips, Tricks & Hacks- P6:Apart from writing books like this one, I write code. I make my living by building web sites and applications as, I’m sure, many readers of this book do. I use CSS to complete jobs every day, and I know what it’s like to struggle to make CSS work when the project needs to be finished the next morning. | CSS and Images 77 float left margin-right 20px width 220px border 1px solid D2D7E4 The gradient background on the Ingredients box shown in Figure uses a very similar background image to what I used for the body text s background except that the Ingredients box coloring graduates from light blue to white. I ve also added a border that s the same color as the darkest part of the gradient. Figure . Using a background image to create a gradient behind the Ingredients box Download at 78 The CSS Anthology Discussion Background images can be applied to any page element including headings as Figure shows. You can see I ve used a repeated image to display a dotted border beneath the heading. The image is positioned at the bottom left of the heading and I ve given the heading six pixels of bottom padding so that the text avoids appearing as if it s sitting on top of the background image chapter03 excerpt h1 Chinese-style stuffed peppers h1 chapter03 excerpt hl background-image url background-repeat repeat-x background-position bottom left padding 0 0 6px 0 color 41667F font-size 160 font-weight normal background-color transparent You can even apply backgrounds to links enabling you the ability to create some interesting effects as Figure shows chapter03 excerpt a link a visited color 41667F background-color transparent padding-right 10px a hover background-image url text-decoration none background-position center right background-repeat no-repeat Download at CSS and Images 79 Figure . Applying a background image to the heading to create an underline Divide the mince mixture between these quarters an oven proof dish Cook in a preheated oven at 200C for about 25 m serving dish and serve immediately. Back to the main menu Figure . Applying a background image to the link on hover Download at .