Foundation HTML5 with CSS3

Chapter 10 Listing 10-16. Styling the main navigation links. nav-main a:link, nav-main a:visited { display: block; padding: .25e ...

Putting it All Together “Fitts’ Law” is an age-old axiom in interaction design, named for psychologist Paul Fitts who proposed i ...

Chapter 10 Figure 10-10. A close-up view of one corner of the content box shows the partially transparent background and subtle ...

Putting it All Together 365 generated content “easy clearing” method works like a charm. Now that we have columns in a box you c ...

Chapter 10 We’ve already included the “module” class in our markup so now it’s time to decide what a sidebar module looks like. ...

Putting it All Together Listing 10-20. Creating a frame effect around product images .product .product-img { background-color: # ...

Chapter 10 Designing with CSS often boils down to the artful application of overrides. You’re providing your own style rules to ...

Putting it All Together Listing 10-21 shows the beginnings of our CSS. Declaring position:relative for the containing element es ...

Chapter 10 This situation comes up all too often in liquid layouts: fixed-width content that overflows its liquid-width containe ...

Putting it All Together What’s more, this simple technique works for most other embedded media, not just images: img, video, obj ...

Chapter 10 Figure 10-16. The completed new item box Styling the Footer The site’s footer is nothing too elaborate. It features s ...

Putting it All Together background: #fc0 url(../images/logo-small.png) 20px 15px no-repeat; background-color: rgba(255,225,105,. ...

Chapter 10 Figure 10-18. The Power Outfitters home page Not too shabby, if we do say so ourselves. And yet... it could still use ...

Putting it All Together Like HTML5, CSS3 is still a work in progress. It isn’t a single specification; CSS3 consists of numerous ...

Chapter 10  -webkit-box-shadow for Apple Safari and Google Chrome (plus any other browsers using the Webkit rendering engine). ...

Putting it All Together indicates the vertical offset on the y-axis. Negative offset values position the shadow to the left or t ...

Chapter 10 -moz-box-shadow: 0 2px 8px rgba(0,0,0,0.25); -ms-box-shadow: 0 2px 8px rgba(0,0,0,0.25); -o-box-shadow: 0 2px 8px rgb ...

Putting it All Together Figure 10-20. A stacked box effect created by three offset shadows There’s a lot more you can do with th ...

Chapter 10 The syntax is fairly simple: a specialized rule in a style sheet, prefixed with an @ symbol (and such special rules a ...

Putting it All Together Font Formats Using web fonts seems easy enough so far, and the CSS itself really can be as simple as you ...