Foundation HTML5 with CSS3

Chapter 10 Web Open Font Format is the emerging standard, gradually supplanting OTF and TTF, as well as Internet Explorer’s prop ...

Putting it All Together later. You can see the new font in place in Figure 10-23, with all the headings rendered in Komika Displ ...

Chapter 10 downloaded at no cost but may come with other stipulations about their use, requiring attribution to the designer, fo ...

Putting it All Together Listing 10-28. Revising the .page-title class to add text-shadow and a bottom border .page-title { font- ...

Chapter 10 Rounded Corners HTML elements naturally form rectangular boxes when a browser renders them. It’s an inescapable part ...

Putting it All Together Lastly, border-radius with four values will round off each of the four corners clockwise in the order of ...

Chapter 10 Listing 10-29. Using percentages with border-radius .square { width: 200px; height: 200px; border-radius: 20%; } .rec ...

Putting it All Together The current generation of web browsers all support border-radius quite well, and even without vendor pre ...

Chapter 10 Figure 10-30. Rounded corners make our buttons and boxes squeezably soft Color Gradients A color gradient consists of ...

Putting it All Together With only the two colors defined, the background will default to a vertical gradient with the starting c ...

Chapter 10 border: 2px solid #ff9e05; box-shadow: 0 2px 8px rgba(0,0,0,.25); background-color: #fc0; background-image: -moz-line ...

Putting it All Together border-radius: 50px; border: 10px solid #d2bdcb; box-shadow: inset 0 0 6px rgba(0,0,0,0.2), 2px 1px 2px ...

Chapter 10 Unless otherwise specified, the gradient’s center point will be the center point of the element. You can instead spec ...

Putting it All Together device’s orientation (portrait or landscape, for handheld smartphones and tablets). It’s a logical expre ...

Chapter 10  device-aspect-ratio: the aspect ratio of the display device, not just the browser window.  color: the number of bi ...

Putting it All Together Figure 10-34. The navigation bar no longer fits on a single line in narrow windows One solution might be ...

Chapter 10 Figure 10-35. The navigation resizes to fit the viewport This is a rather simplistic demonstration of what media quer ...

Putting it All Together Figure 10-36. The dConstrict 2012 website uses media queries to adapt the content to different viewport ...

Chapter 10  Conditional group rules – Restrict CSS rules to browsers that support certain properties with @supports (a potentia ...

Index A Anchor element, 185 Au revoir attribute, 190–91 href attribute, 186–87, 187 hreflang attribute, 187 inline vs. block-lev ...