CSS Mastery- P8

CASE STUDY: CLIMB THE MOUNTAINS 327 <p class="dist_elev">24.7 miles | elevation 2,473ft</p> <p class="username"><a href="#">from Jamie Pittock <img  src="assets/images/content/avatar_pittock.jpg" class="avatar"  alt="Jamie Pittock's avatar" /></a></p> </li> </ul> </div> By building content in this way, we can collate blocks of information as lists, providing all the hierarchy and styling control that we know and love about lists. It is then really easy to use basic selectors to target the unordered list within the others_routes containing div and the various elements within the li elements. Note that we’re using border- radius, -webkit-border-radius, and –moz-border-radius rules to apply rounded corners to the ul element, and be reassured that we’ll discuss these later in this case study. div#others_routes ul { list-style:none; border:1px solid #dedeaf; background:#ffffcc; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; margin:0; padding:10px; } div#others_routes ul li { margin:0; padding:10px 55px 10px 0; position:relative; border-bottom:1px solid #dedeaf; border-top:1px solid #fff; } Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. CHAPTER 11 328 div#others_routes ul li h3 { margin-bottom:5px; } div#others_routes ul li img { position:absolute; top:10px; right:10px; } div#others_routes ul li p.username { margin:3px 0 0 0; font-style:italic; font-size:12px; } div#others_routes ul li p.username a { color:#666; } div#others_routes ul li p.username a:hover, div#others_routes ul li p.username a:focus { text-decoration:underline; } In the preceding markup, we’re targeting deeper HTML elements with some straightforward descendent selectors. For example, we can strategically target the link hover styling of the username link with div#others_routes ul li p.username a:hover, descending deeper and deeper with the selector until we define our target element–an element owned by every preceding element in the selector, resulting in Figure 11-10. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. CASE STUDY: CLIMB THE MOUNTAINS 329 Figure 11-10. The initial Members’ Routes container Excellent. Our list of member-submitted walks and routes is shaping up nicely, and most might leave it as it is. It looks pretty neat and tidy. But wait! We are perfectionists, and we have powerful CSS at our disposal. Why settle for good when we could have great? In the next two examples, we’ll neaten up the top and bottom of the routes container using some nifty CSS tricks. The :first-child pseudo-class If you’ve ever wondered how a designer targets the first letter or line of a block of text, he or she is probably using a pseudo-class such as :first-letter or :first-line. These cool tricks enable us to style elements based on simple logic. The :first-child pseudo-class targets only an element that is the first child of a containing element. In this case study, I have my container of member’s walks, with each item’s detail added within an unordered list. Each li element has the same padding and thin border at the top and bottom. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. CHAPTER 11 330 div#others_routes ul li { margin:0; padding:10px 55px 10px 0; position:relative; border-bottom:1px solid #dedeaf; border-top:1px solid #fff; } This keeps the list content spaced evenly, but I’d like to reduce the amount of padding for only the top list item (in the example, this is the Kinderscout ridgewalk circuit walk). In fact, I don’t want any padding at the top, and I don’t want a border either. So, bring on the pseudo-class. Here, we create a new rule, and we use the same selector to target the unordered list items inside the #others_routes containing div, but we add :first- child immediately after the li element, essentially saying “go in to the container, find the unordered list, and perform the following style override only on the very first li element you find.” div#others_routes ul li:first-child { padding-top:0; border-top:none; } As Figure 11-11 shows, the Kinderscout ridgewalk circuit item has no top border or top padding and nestles snugly under the roof of the parent container. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. CASE STUDY: CLIMB THE MOUNTAINS 331 Figure 11-11. The top padding and border has been successfully removed. It’s as simple as that, but it’s a very powerful method of targeting a specific element, with a million and one uses. And now that we’ve dealt with the top of our contained list, let’s see what we can do with the bottom of it. Adjacent sibling selectors Having just introduced you to :first-child, now would ideally be a fitting moment to introduce the usefulness of :last-child, a method of targeting the last instance of a child element within a specific parent container. The approach is much the same as with :first-child, so feel free to experiment with this. Unfortunately, only recent versions of browsers such as Safari, Firefox, Google Chrome, and Opera support this method, so we need to be mindful of IE 6, 7, and 8 and employ an alternative approach, thanks to adjacent sibling selectors. In this example, we now need to do the reverse of what we just did with the :first-child pseudo-class. As we previously discussed, each unordered list item has top and bottom padding and a top and bottom border. We successfully turned off these styles for the first li element, now we need to turn them off for the last element. But how do we do that? How does the style sheet know which is the very last element in a certain group, and how can we accurately target it. This requires some kind of dark arts, right? Well, sort of. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. CHAPTER 11 332 Adjacent sibling selectors consist of several selectors separated by the + combinator. This matches an element that is the next sibling to the first element. Note that elements must have the same parent, and the first must immediately precede the second. So, as with our :first-child example, we again target the others_routes parent div, and we then methodically drill down through the selectors until we hit the element we wish to style. Our unordered list will always only have four li elements, and that is the key to making this work: div#others_routes ul li + li + li + li { padding-bottom:0; border-bottom:none; } So here, we’ve created a selector that thinks “Ah, when in the others_routes div, find the unordered list, count along until we match the fourth li element, and apply styles to that only.” Simple. Thus, the result, shown in Figure 11-12, presents the fourth li element without bottom padding or a bottom border, adding further neatness and attention to detail, simply by making the most of the CSS selectors at our disposal. Figure 11-12. The bottom border and padding has been removed successfully Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. CASE STUDY: CLIMB THE MOUNTAINS 333 Transparency, shadows, and rounded corners In the first edition of this book, my case study relied heavily on boxes with rounded corners. Everybody wants rounded corners at some point for a little visual flair, and well, right angle corners are just so easy, boring maybe. Of the seemingly endless possible methods of creating rounded corners, I settled on one that used a fair amount of JavaScript in combination with several background image sprites and a reasonable amount of extraneous markup. It was weighty, clumsy, awkward, and there wasn’t really an alternative. Fast-forward to me sitting here typing this chapter, and I’m basically just going blue, wanting to shout “CSS 3!” as loud as I can. Things have changed: expectations have grown, and the tools have evolved. Sure, the browsers haven’t all caught up (what else do you expect?), but as an industry we are braver and more willing to work with new ideas and push things forward. In this section, I’ll take one humble image and caption from the CTM homepage and do all sorts of lovely CSS 3 things to it, without any use of JavaScript, further graphics, or extraneous markup. Viva La Revolution! Our aim We’ll being with one simple 310 × 185-pixel JPG named campsite.jpg (see Figure 11-13). Then, we’ll apply a caption with white text onto a semitransparent grey overlay at the base of the image, and then apply a Polaroid-style photo border around the image, ensuring it has perfect rounded corners and a believable drop shadow. Thankfully, we can do all of that with CSS. Figure 11-13. The initial campsite.jpg image The markup is pretty simple. Our image and caption need to be contained within one div, named captioned_image for the purposes of this example. The paragraph is given class="caption", so we can target it directly, and for now, that is it. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. CHAPTER 11 334 <div class="captioned_image"> <img src="assets/images/content/campsite.jpg" alt="From the campsite" /> <p class="caption">From the campsite bridge towards the village, Great  Gable and Lingmell.</p> </div> With that markup in place, we can now experiment with three of the hottest CSS 3 techniques at our disposal. Caption image overlay and RGBa transparency Colors may be specified in a number of ways. Many specify color as an RGB triplet in hexadecimal format (a hex triplet). Others often use their common English names in some cases. It is also possible to use RGB percentages or decimals. The following examples are all valid for the color red: color: #f00 color: #ff0000 color: red color: rgb(255,0,0) color: rgb(100%, 0%, 0%) RGB stands for red, green, and blue and is a device familiar to most designers. RGBa introduces a fourth channel – an alpha channel that deals with transparency. The beauty of CSS 3 is that we can continue to specify color with RGB but also set the alpha transparency of that color with a fourth decimal value. We can use anything from 0.0 (totally transparent) through to 1.0 (totally solid). In the following example, we again declare the color red with RGB, but also set a 50 percent transparency by declaring 0.5 as the alpha transparency. color: rgb(255,0,0,0.5) The RGBa value is assigned only to the element we declare, so any child elements will not inherit the transparency, which is a clear distinction from the opacity property, which will always be inherited. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. CASE STUDY: CLIMB THE MOUNTAINS 335 So, for the CTM site, the following declarations will perform the first bit of magic for our photo and caption. We position the containing div relatively and then the caption absolutely, so that it can be positioned exactly where we wish above the image. div.captioned_image { position:relative; } div.captioned_image p.caption { position:absolute; bottom:0; left:0; margin:0; color:#fff; font-size:13px; line-height:16px; font-style:italic; padding:5px; } We next declare the RGBa value as rgba(0,0,0,0.5) where the first three values combine to give us black and then the alpha transparency value of 0.5 sets a medium transparency, which can be tweaked until we’re happy with the overall effect. div.captioned_image p.caption { position:absolute; bottom:0; left:0; margin:0; background:rgba(0,0,0,0.5); color:#fff; font-size:13px; line-height:16px; font-style:italic; padding:5px; } Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. CHAPTER 11 336 This gives us the exact caption overlay we wanted, as shown in Figure 11-14. Figure 11-14. The transparent caption in place As with many exciting new CSS 3 techniques, some browsers are playing catch-up, most notably Internet Explorer (including the current IE 8), which will not render the alpha-transparency. For example, IE 7 will instead default to a reasonably acceptable solid layer, much like we’d see if serving a transparent PNG graphic without forcing alpha transparency support (see Figure 11- 15). Figure 11-15. The caption overlay as rendered by IE 7 IE 8, which still does not support RGBa, will simply render the caption text on top of the image without any kind of background. To get around this problem, we can add a rule to the screeni-ie8.css style sheet to ensure a gray background is placed behind the text. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... fixed-width, 75 flexible-width, 78 rounding, 344 CSS (Cascading Style Sheets) history of, 6 versions of, 17–18 CSS 3 columns, 236, 238 CSS extensions, 86 CSS frameworks, versus CSS systems, 238, 243 CSS image maps, 150, 156 CSS opacity, 95 CSS sprites, 123, 125 CSS validator, 246 CSS2 , advanced features, 284, 292 CSS3 , advanced features, 284, 292 CSS- Discuss, 256 CSSDoc, 44 Cufón, 298, 299, 300, 301, 302... really be exceptional, but well, this is a CSS book Summary There you have it This has been more of a brief weekend city break than two weeks by the beach, but insightful nonetheless, I hope I’ve really enjoyed pulling the Climb the Mountains concept together for this second edition of CSS Mastery, especially with the freedom to cut loose with some fresh CSS 3 ideas Naturally, there are oodles more... -webkit-border-top-left-radius:3px; -moz-border-radius-topright:3px; -webkit-border-top-right-radius:3px; } This simple adjustment to the CSS will give us the subtle but sexy tab shown in Figure 11-22 in Firefox and Safari Figure 11-22 The selected tab now has rounded top corners, using only CSS With the navigation finally resolved, we can now move on to the altogether more juicy elevation data The main elevation... campsite bridge towards the village, Great Gable and Lingmell. We can now define the styling for this polaroid frame, and that calls for a few more tricks from the CSS 3 specification border-radius In the previous edition of CSS Mastery, both Andy and myself detailed a useful but somewhat laborious technique for adding frames and shadows to images This involved a couple of divs and background... references where possible Remember, the site will remain online at http://www.climbthemountains.com/cssm, and the source code is available from www.friendsofed.com Do feel free to take it, examine it, rip it apart, put it back together again, and use it as inspiration for your own ideas and stunning CSSpowered masterpieces 352 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark... support for, 191 IE version support for, 118 autocomplete .css, 281, 306 A B absolute positioning, 60–61 description, 129 in relative container, 269–270 :active dynamic pseudo-class selector, 110 adjacent sibling selector, 29 :after pseudo-class, 68 Ajax, adding interactivity with, 304–306 almost standards mode, 22 anchor type selector, 109 annotating CSS files, 44 Asynchronous JavaScript + XML See Ajax... with the selected tab highlighted That’s our basic Your latest route navigation sorted, but there’s another neat CSS 3 trick we can pull Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark 343 CHAPTER 11 Rounding the corners Earlier in this case study, we looked at the CSS 3 border-radius property, creating a simple rounded-corner frame for an image Here, we will use similar properties... 17, 18 HTML 4.01 Strict, 279 HTML 5, 279–280 HTML Validator for Firefox, 247 I icons, external links, 115 id attribute, adding to body tag, 38 IDs, 8, 9, 11, 12, 26, 319 ie .css, 281, 286 IFR (Inman Flash Replacement), 104 image maps CSS image maps, 150 Flickr-style, 156, 164 image-repeat property, 101 images background, 71–74 gradients, 72 modifying, in CTM case study, 333– 352 border-radius property,... attribute, 140 relative positioning, 59 description, 60 drop shadows using, 91 remote rollovers, 165–170 repeating patterns, 206 required fields, form layout, 193 reset .css sheet, 280, 281, 316 RGBa transparency, 334–337 rollovers, 120–121, 150 with CSS3 , 125–128 Flicker-style image maps, 156–164 graphical nav bar, 144 Pixy-style, 121–123 remote, 165–170 Roma Italia case study, 276–309 rounded corner boxes,... boxes, 75–81 flexible-width rounded-corner boxes, 78 mountaintop corners, 81 using CSS 3 multiple backgrounds, 84 rounding corners, 344 rules, specificity of, 35 Rundle, Mike, 103 Rutter, Richard, 91 S Safari 3 browser, creating drop shadows for, 339–341 Scalable Inman Flash Replacement (sIFR), 104 scratch files, 314 screen .css file, 315, 317 selectors, 25–36 adjacent sibling selector, 29 applying generic . and that calls for a few more tricks from the CSS 3 specification. border-radius In the previous edition of CSS Mastery, both Andy and myself detailed a. we’ll neaten up the top and bottom of the routes container using some nifty CSS tricks. The :first-child pseudo-class If you’ve ever wondered how a designer