Đang chuẩn bị nút TẢI XUỐNG, xin hãy chờ
Tải xuống
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 3.9 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 3.9. Using a background image to create a gradient behind the Ingredients box Download at WoweBook.Com 78 The CSS Anthology Discussion Background images can be applied to any page element including headings as Figure 3.10 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 backgrounds2.html excerpt h1 Chinese-style stuffed peppers h1 chapter03 backgrounds2.css excerpt hl background-image url dotty.gif 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 3.11 shows chapter03 backgrounds2.css excerpt a link a visited color 41667F background-color transparent padding-right 10px a hover background-image url arrow.gif text-decoration none background-position center right background-repeat no-repeat Download at WoweBook.Com CSS and Images 79 Figure 3.10. 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 3.11. Applying a background image to the link on hover Download at .