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.
CASE STUDY: CLIMB THE MOUNTAINS
337


div.captioned_image p.caption { background:#666; }

The important lesson is not to be put off by IE and its failings. I’d encourage all of you
hexadecimal triplet lovers to start experimenting with the incredible flexibility of RGBa straight
away, on a variety of elements within your layouts. You will never look back, and everything will
be much clearer!

Combining classes
I’m still surprised when I speak to designers who aren’t aware that classes can be combined to
bring greater flexibility to elements.
For example, you might use class="profile" several times on any given page, assigning
common color and layout information. However, let’s say you wish to change only the
background color based on a variable such as whether or not the user is a member or a guest.
Instead of creating two profile styles just to supply different color references, you could simply
keep colors as separate rules, and combine these with the profile class.

.profile {
width:300px;
margin:0 10px;
padding:10px;
font-size:11px;
}
.guest {
background-color:#ff9900;
}
.member {
background-color:#ff0000;
}

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
CHAPTER 11
338

This style could then be applied using combined classes depending on user status. Any number
of classes can be combined, simply by separating each with a space, as follows:

<div class="profile member">

<p>Member options…</p>
</div>

Bringing this to the CTM site, we can use combined classes to optionally add a frame around only
certain captioned images. Notice that, alongside captioned_image, we have added the class
polaroid:

<div class="captioned_image polaroid">
<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>

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 images that needed to be very carefully styled and positioned. Yep, it was tough
back in 2005.
This brings us to the border-radius property, which, essentially, brings rounded corners to
elements using pure CSS declarations. Sadly, Internet Explorer (hello again) doesn’t support this
property at all, so IE corners will still be squared off, which seems acceptable to me. Currently,
the same goes for the ever-evolving Opera browser.
At the time of this writing, no popular browsers are pledging support for the standard border-
radius property, and so while it is important to include the declaration from a forward-thinking
standpoint, we also need to add two further declarations in the short-term – one for Mozilla-based
browsers such as cuddly Firefox and one for WebKit-based browser such as the ever-switched-

on Safari (which also supports elliptical corners). For more information, examples and some cool
tricks, view descriptions and examples over at />radius/.
All three declarations are clearly defined here:
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
CASE STUDY: CLIMB THE MOUNTAINS
339


.polaroid {
border:5px solid #f00;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
}

Seeing as white on white isn’t exactly great for demonstrations, note that I have specified a
temporary red border so that you can see what is happening in Figure 11-16. You’ll see that each
corner is rounded around a 5px radius. This is actually the radii of a quarter eclipse defining the
exact corner. As with margin, padding, and border, there are four individual border-radius
properties—one for each corner of an element—and one shorthand property.

Figure 11-16. Using a red border clearly shows the rounded corners
Now, how much easier is that compared with the methods we were describing back in the first
edition? With our corners rounded, we can now think about applying a simple drop shadow to
give the image some sense of affordance.
box-shadow
CSS 3 brings us a significantly simpler method of creating neat drop shadows for the Safari 3 and
above and Firefox 3.5 and above browsers. The property takes three lengths as its attributes—
these being the horizontal offset, the vertical offset, and the blur radius—and finally a color.
If we apply a positive value to the horizontal offset of the shadow, the shadow will be on the right-

hand side of the element. A negative offset will put the shadow on the left of the element.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
CHAPTER 11
340

If we apply a negative value to the vertical offset, the shadow will be appear on top of the
element, whereas a positive value would place the shadow below the box.
The blur radius is really handy. If the value is set to 0 the shadow will be sharp, and the higher the
number, the more blurred it will become.
Adding this to our polaroid class, we can work with the four values to create a drop shadow that
will be to the right and bottom of our captioned image, with a 5-pixel blur in a medium grey, as
follows:

.polaroid {
border:5px solid #fff;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-webkit-box-shadow:1px 1px 5px #999;
-moz-box-shadow:1px 1px 5px #999;
}

Brilliantly, the box-shadow will respect the border-radius value we gave earlier, so that we have a
rounded picture frame and complimentary shadow working in perfect harmony, as shown in
Figure 11-17.

Figure 11-17. Our image now has a caption, frame, and rounded corners
Alas, this isn’t yet the case in Internet Explorer, as shown in Figure 11-18.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.