CSS Cookbook- P6

Chia sẻ: Thanh Cong | Ngày: | Loại File: PDF | Số trang:50

0
50
lượt xem
8
download

CSS Cookbook- P6

Mô tả tài liệu
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

Tham khảo tài liệu 'css cookbook- p6', công nghệ thông tin, kỹ thuật lập trình phục vụ nhu cầu học tập, nghiên cứu và làm việc hiệu quả

Chủ đề:
Lưu

Nội dung Text: CSS Cookbook- P6

  1. height:123px; z-index:2; left: 264px; top: 0; } #water { position:absolute; width:315px; height:323px; z-index:1; left: 359px; top: −20px; } The left and top properties indicate the placement of the images within their nearest positioned ancestor element or the initial containing block. In this case, it’s the initial containing block to the div elements. Furthermore, the body element’s margin has a value of 0, meaning that the origin point is in the upper-left corner of the browser’s viewport. body { margin: 0; } Even though this method works, if the web document is later modified, exact posi- tioning becomes a design liability. For example, adding a simple headline above the images in the HTML results in the anomaly shown in Figure 4-27: Kids Welcome New Boat! Figure 4-27. Presentation breaks with addition of heading 4.22 Combining Different Image Formats | 225 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  2. Because the image of the children has not been positioned with absolute, it moves down the flow of the document. The other image stays in place because it has been positioned within the initial containing block and is still in the same place it was before the headline was added. By using the background-positioning method within block-level elements, you can create a self-contained module. Then, when content is added to and removed from the web page, the presentation remains whole, as seen in Figure 4-28 and shown in the following code: CSS Cookbook body { margin: 5% 10% 0 10%; } #content { background-image: url(landscape.gif); background-repeat: no-repeat; background-position: bottom right; height: 400px; width: 674px; } h2 { margin: 0; padding: 0; background-image: url(kids.jpg); background-repeat: no-repeat; background-position: bottom left; height: 400px; width: 600px; } #boat { background-image: url(boat.gif); background-repeat: no-repeat; display: block; width: 207px; height: 123px; margin-left: 250px; margin-top: 75px; } Kids Welcome New Boat! 226 | Chapter 4: Images Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  3. Figure 4-28. A different approach to combining images See Also Recipe 13.2 for creating unexpected incongruity between two elements; Recipe 13.3 for combining unlike elements 4.23 Rounding Corners with Fixed-Width Columns Problem You want to create rounded corners on fixed-width columns. Solution Create two background images, with one image containing the top corners and the other image containing the bottom corners, as shown in Figure 4-29. Wrap a div element around the content that’s within the column: I Met a Girl I’d Like to Know Better 4.23 Rounding Corners with Fixed-Width Columns | 227 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  4. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam. Figure 4-29. One image for the top corners and another for the bottom corners Place the bottom background image in the div element: #box { width: 214px; background-image: url(bkgd_bottom.gif); background-position: bottom; background-repeat: no-repeat; } Then place the top background image in the h2 element, as shown in Figure 4-30: h2 { background-image: url(bkgd_top.gif); backgroung-position: left top; 228 | Chapter 4: Images Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  5. background-repeat: no-repeat; padding: 7px 7px 3px 7px; margin: 0; border-bottom: 1px solid #999; font-size: 1.3em; font-weight: normal; color: #eee; } Figure 4-30. A background image placed at the bottom of the column Discussion To compensate for different text sizes, make the background images extend for longer than just the space specified in the design. For example, the images used in this Solution are 600 pixels tall; however, it’s not unheard of to have graphics that are more than 1,000 pixels tall to ensure that a page’s design maintains its integrity with extreme font sizing. 4.23 Rounding Corners with Fixed-Width Columns | 229 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  6. Flexible widths By fixing the width of the column to a length unit such as pixels, it’s possible to place an image containing two corners in one image. With column widths that change when the user resizes the browser, however, the fixed-width solution falls apart. See Also Recipes 2.15, 2.16, and 2.17 for rounding corners with flexible widths 4.24 Rounding Corners (Sliding Doors Technique) Problem You want to round corners in columns that have flexible widths. Solution Use the Sliding Doors technique that was made popular by web designer Douglas Bowman. Create the design of the rounded corners, as shown in Figure 4-31. Figure 4-31. The basic design for the column Then create separate graphics for the four corners, as shown in Figure 4-32. Wrap the content that is in the column with additional div elements: 230 | Chapter 4: Images Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  7. I Met a Girl I’d Like to Know Better Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam. Figure 4-32. The column design split up into four graphics Then place the background images through CSS, as shown in Figure 4-33. The top-left corner goes in the innerhead id selector, the top-right corner slides into the preexisting h2 element, the content id selector gets the bottom-left selector, and the innercontent id selector houses the bottom-right graphic: #innerhead { background-image: url(corner_tl.gif); background-position: top left; background-repeat: no-repeat; } h2 { background-image: url(corner_tr.gif); background-position: top right; background-repeat: no-repeat; margin: 0; padding: 7px; 4.24 Rounding Corners (Sliding Doors Technique) | 231 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  8. border-bottom: 1px solid #999; font-size: 1.3em; font-weight: normal; color: #eee; } #content { background-image: url(corner_bl.gif); background-position: bottom left; background-repeat: no-repeat; } #innercontent { background-image: url(corner_br.gif); background-position: bottom right; background-repeat: no-repeat; } Figure 4-33. Rounded corners appearing on the column 232 | Chapter 4: Images Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  9. Discussion The div and h2 elements act as hooks to add background images to all four corners of the column. As the browser resizes, the background images stay in their respective corners, as shown in Figure 4-34. Figure 4-34. Rounded corners maintained, even though the column expands To make sure the design integrity is maintained as the column expands, further digital image editing is required. Manipulate one side, either the left or the right, and expand the two graphics both vertically and horizontally. For example, the bottom-right and bottom-left graphics (see Figures 4-35 and 4-36) were expanded for this Solution. 4.24 Rounding Corners (Sliding Doors Technique) | 233 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  10. Figure 4-35. The bottom-right graphic, which is 600 pixels wide and more than 250 pixels tall Figure 4-36. The bottom-left graphic, which is 600 pixels wide and 600 pixels tall 234 | Chapter 4: Images Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  11. See Also Recipe 2.16 for a simple solution to rounding corners of a column 4.25 Rounding Corners (Mountaintop Technique) Problem You want to create one set of graphics for rounded graphics while being able to display many background colors within the column. Solution Use the Mountaintop technique that was popularized by web designer Dan Cederholm. Create a small graphic that will act as the basis for the rounded corners, as shown in Figure 4-37. Figure 4-37. The top-left corner graphic The black color in Figure 4-37 will be set to transparent when the image is exported as a GIF. Export the image as a GIF with the filename corner_tl.gif. Then rotate the image 90 degrees (see Figure 4-38) and export it as a GIF image, naming it corner_tr.gif. Repeat the last two steps to create the bottom corners, corner_br.gif and corner_bl.gif. 4.25 Rounding Corners (Mountaintop Technique) | 235 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  12. Figure 4-38. Rotating the image 90 degrees Add additional div elements around the column content: I Met a Girl I’d Like to Know Better Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat 236 | Chapter 4: Images Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  13. volutpat. Ut wisi enim ad minim veniam. Then place the four corner graphics within the id and p selectors, as shown in Fig- ure 4-39: div#box { width: 55%; background-color: #999999; background-image: url(corner_bl.gif); background-repeat: no-repeat; background-position: bottom left; } #head_outer { background-image: url(corner_tl.gif); background-repeat: no-repeat; } #head_inner { background-image: url(corner_tr.gif); background-repeat: no-repeat; background-position: top right; } div p { margin: 0; padding: 7px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1.1em; background-image: url(corner_br.gif); background-position: bottom right; background-repeat: no-repeat; color: #333333; font-size: .8em; line-height: 1.5; } Figure 4-39. Mountaintop corner example 4.25 Rounding Corners (Mountaintop Technique) | 237 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  14. Discussion The beauty of the Mountaintop technique rests in its simplicity. Four small graphics made with low file sizes thanks to the GIF compression algorithm are placed in the background of four block-level elements. Also, there is no need to expand a couple of images to make sure the design integrity is maintained as the column resizes, as you do with the Solution for Recipe 3.22. Plus, the Mountaintop technique allows you to quickly change the column’s back- ground color without revising the corner graphics, as shown in Figure 4-40. However, you will need to change the corner graphics if the background color of the web page or column’s parent element changes. Figure 4-40. Maintaining integrity in the column even though the color has changed and the column has been resized See Also Recipe 4.24 for automatically adding corners on columns without custom-made images 238 | Chapter 4: Images Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  15. 4.26 Rounding Corners with JavaScript Problem You want to include rounded corners on elements without the hassle of introducing new markup or images manually. Solution Use the Nifty Corners Cube code by Alessandro Fulciniti. First download the components of the Nifty Corners Cube solution, which include one CSS and one JavaScript file, from http://www.html.it/articoli/niftycube/index.html. Upload both the JavaScript and CSS files associated with the Nifty Corners Cube sol- ution. Then link the JavaScript to the web page by using the src attribute in the script element: You won’t link directly to the CSS file, as the JavaScript file does that. Next, modify the markup that will have rounded corners by giving it a unique value in the id attribute: Marquee selectus ... Then make a separate JavaScript call to the browser indicating which element gets the rounded corners, and define the size of the rounded corners, as shown in Figure 4-41: window.onload=function() { Nifty("div#box","big"); } Discussion Since it’s almost a completely worry-free method for creating rounded corners, the Nifty Corners Cube solution has been called more of a tool than a technique. 4.26 Rounding Corners with JavaScript | 239 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  16. Figure 4-41. The rounded corners (left) and the default rendering (right) This Solution is based on JavaScript. If the user does not have JavaScript in his browser or it is turned off, the rounded corners do not appear. Different colors Colors are detected automatically. The JavaScript automatically changes the colors to match the background color within the element as well as its parent element (usually the body of the web page). This means a developer only has to worry about setting which element gets the curves and the size. Different sizes Four keyword sizes are written into the Nifty Corners Cube JavaScript: none, small, normal (default), and big. small is equal to the value of 2 pixels, normal is 5 pixels, and big is 10 pixels. For example, to adjust the corners so that they are small, the JavaScript call would look like this: window.onload=function() { Nifty("div#box","small"); } 240 | Chapter 4: Images Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  17. Different elements Nifty Corners Cube accepts numerous selectors, making it easier to dictate which ele- ments should receive rounded corners, as shown in Table 4-3. Table 4-3. Selectors understood by Nifty Corners Cube JavaScript Selector Example Type "div" "h3" id "div#box" "h3#main" class "div.box" "h3.box" Descendant with id "div#box h3" "h3#main div" Descendant with class "div.box h3" "h3.main div" Grouping "div, h3" "div, h3.main div, p" For example, to apply rounded corners to multiple elements, the JavaScript function might look like the following: window.onload=function() { Nifty("div, h3.main div, p","small"); } Specific corners The Nifty Corners Cube solution also makes allowances that developers might not want to apply rounded edges to all the corners. Table 4-4 lists the keywords that allow de- velopers to single out which corner or corners to round. Table 4-4. Keywords understood by Nifty Corners Cube JavaScript Keyword Meaning tl Top-left corner tr Top-right corner bl Bottom-left corner br Bottom-right corner top Upper corners 4.26 Rounding Corners with JavaScript | 241 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  18. Keyword Meaning bottom Lower corners left Left corners right Right corners all (default) All the corners For example, to apply rounded corners to the top corners of multiple elements within a web page, the JavaScript function might look like the following: window.onload=function() { Nifty("div, h3.main div, p","small top"); } Variations of this Solution for the numerous JavaScript frameworks are available today. You can find one such solution for jQuery at http://www .malsup.com/jquery/corner/. See Also http://www.html.it/articoli/niftycube/index.html for more information about Nifty Cor- ners Cube 4.27 Setting a Shadow on an Element with CSS Problem You want to place a box shadow on an element with CSS. Solution Use the box-shadow property with proprietary browser vendor CSS properties, as shown in Figure 4-42: #header { min-width: 250px; text-shadow: 0 −1px 0 rgba(0,0,0,.8); box-shadow: 3px 3px 19px rgba(0,0,0,.8); -webkit-box-shadow: 3px 3px 19px rgba(0,0,0,.8); -moz-box-shadow: 3px 3px 19px rgba(0,0,0,.8); background-image: -webkit-gradient(linear, left top, left bottom, from(#930), to(#6b3703), color-stop(0.5, #903000)); background-image: -moz-linear-gradient(left top, left bottom, from(rgba(153,51,0,.3)), to(#6b3703), color-stop(0.5, #903000)); margin: 7px; 242 | Chapter 4: Images Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  19. padding: 14px; } Figure 4-42. An element with a box shadow Discussion Box shadows work in a similar way to text shadows (see Recipe 3.32). The first value represents the distance on the x-axis, and the second value is the value for the y-axis. A positive value means the shadow is placed down and to the right, respectively. Negative values place the shadow up and to the left. The third value defines the radius or glow of the shadow. The fourth value sets the color of the shadow. In the Solution, the color is set with RGBA, allowing for opacity. This approach to color (although not supported by all browsers) allows for a smoother transition to the tiling background. See Also Recipe 4.28 for a cross-browser method for placing an image; the CSS3 specification for box-shadow at http://www.w3.org/TR/css3-background/#the-box-shadow 4.27 Setting a Shadow on an Element with CSS | 243 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  20. 4.28 Placing a Drop Shadow Behind an Image Problem You want to place a drop shadow behind an image, as shown in Figure 4-43. Figure 4-43. A drop shadow placed behind an image Solution Place the image element (as shown in Figure 4-44) inside a div element with the class attribute set to imgholder: Set the image alignment of the div element to the left so that the text wraps around the image. Next, set the background image of the drop shadow in two background prop- erties. In the first background property, use an image with an alpha transparency such as PNG: div.imgholder { float:left; background: url(dropshadow.png) no-repeat bottom right !important; 244 | Chapter 4: Images Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Đồng bộ tài khoản