Errata

Step 1 directs you to:

"open the style.css file you completed in in[sic] the tutorial on Enhancing Images (page 272).
You'll update the img style you created before"

It goes on the step 2 where you add the box shadow, however, at this point I'm clearly only adding it to the external style sheet I was working on in the previous tutorial. When I follow through on the steps and save the file I won't be making any changes to the current html, so when looking at Figure 8-22 I only see the same page.

I assumed we adding the external style sheet to the current folder 08->02_gallery_ex. When I did that, the page was definitely not the same as Figure 8-22. So I assumed that the styles.css in this second tutorial does not get updated and only added the drop box property to the initernal style sheet I was working on. Only then was I rewarded with the same web page style as the one in Figure 8-22

I think the step needs to be re-worded or removed altogether to avoid confusion.

Link to Living Examples www.sawmac.com/css3/ results in 404 page not found

In book is:

You can?t string multiple :not()selectors together. For example, the following is invalid:

a[href^="http://"]:not([href*="google.com"]):not([href="yahoo.com])

In other words, you can only use :not( )once with a selector.

But (http://www.w3.org/TR/css3-selectors/#negation) says:

Example:

To represent all h2 children of an XHTML body except the first and last, one could use the following selector:

body > h2:nth-of-type(n+2):nth-last-of-type(n+2)

In this case, one could also use :not(), although the selector ends up being just as long:

body > h2:not(:first-of-type):not(:last-of-type)

Text says:

The previous
HTML would change to:

<div id="article">
<p>A paragraph</p>
<p>Another paragraph</p>
<p class="special">A special paragraph</p>
</div>

but it is exactly the same of the previous one.

It should be:

<div class="article">

instead.

I have tried Example of warning sign and margins and I think there is mistake in this example. Its written that
"But say you insert a heading inside the warning box, and to put a little room between it and the top and bottom of the div, you set the heading’s margin to 10 pixels. You may think you’re adding 10 pixels of space between the heading and the top and bottom of the div, but you’d be wrong. Instead, the margin appears above the div. In this case, it doesn’t matter how large a margin you apply to the headline—the margin still appears above the div."
Actually by doing above steps margin appears inside div and above and below h2. I actuallly got "10 pixels of space between the heading and the top and bottom of the div".
THIS WAS MY CODE :
.collapsingMargins{
margin: 20px 0 20px 0;
}
h2{
margin: 10px 0 10px 0;
}
<h1> Heading</h1>
<div class="collapsingMargins">
<h2>DO not try this at HOME</h2>
</div>

syntax of gradients was a little changed
and now all chapter about gradients have not a right description

for example, linear gradient for set position need to use keyword "to" before set a value, for example:
linear-gradient(to left....);

in radial-gradients the same problem

to position starting (center) point of radial-gradient must have keyword "at" before values and now must be after set shape and before color-stop, for example:

radial-gradient(circle, at 100px 100px...)


so old description and examples now have not working

.button:active {

-webkit-translate(1px,2px);
-moz-translate(1px,2px);
-o-translate(1px,2px);
-ms-translate(1px,2px);
translate(1px,2px);
}
These should be:
.button:active {

-webkit-transform: translate(1px,2px);
-moz-transform: translate(1px,2px);
-o-transform: translate(1px,2px);
-ms-transform: translate(1px,2px);
transform: translate(1px,2px);
}

The transition-timing-function property can take one of five keywords

there are more possible keywords, the missing: steps(), step-start and step-end

in Page 349
For example, the Bezier curve pictured in Figure 10-8 starts off steep (the animation begins quickly), then flattens in the middle (the animation slows down), and then grows steep again (the animation rapidly progresses to its final state). To create this kind of animation, add this line of code:
transition-timing-function: cubic-bezier(.20, .96, .74, .07);

Figure 10-8
In this example, the line starts off relatively flat, meaning the animation will move slowly at first, then ramps up steeply at the end, meaning the animation will quickly progress to the finish at the end of the transition?s duration.

should be
In this example, the line starts off steep, meaning the animation will begins quickly at first, then ramps up steeply at the end, meaning the animation will quickly progress to the finish at the end of the transition?s duration.

"float: left;" should be: "display: inline-block".

On location 10383 of CSS3: The Missing Manual (Kindle version); there seems to be an error in the description of what to cut from the code and paste.

Step 2 says to select <!-- FIRST SIDEBAR goes here --> and all the content down to the closing </article> tag then cut and paste above the FIRST SIDEBAR.

You can see where this might be a bit confusing. Especially since you just cut out all of the sidebar information from the code.

I think this was meant to say: Select <!-- main content goes here --> and all content down to the closing </article> tag then cut and paste above the first sidebar (since we're arranging the main content above the supplemental content in the first sidebar).