Index

Numbers

2D transforms

applying, 159

matrix, 160

rotate, 155–156

scale, scaleX, scaleY, 157–158

skew, skewX, skewY, 158–159

translate, translateX, translateY, 153–154

X, Y, and Z axes, 154

3D animations, hardware acceleration, 177. See also CSS Animations

3D transforms. See also CSS Transforms

backface-visibility, 174–177

matrix3D, 165

perspective, 165–170

rotate3D, 163–164

rotateX, rotateY, rotateZ, 162

scale3D and scaleZ, 165

transform-style, 171–174

translate3D, translateZ, 160–161

trouble with, 178

Symbol

:: (double-colon) syntax, 33

A

accessibility, prioritizing, 7–8

adaptive design, versus responsive design, 289

Adaptive Images technique, 309

adjacent sibling CSS3 selector, 23

Android

animations, 189

bling boxes, 109

CSS3 Color Units, 16

font formats, 74

layout features, 243

rem units, 20

responsive design features, 291

text features, 87, 94

transforms, 152

transitions, 179

animating flaming text, 202–203

animation rate, altering, 194–195

animation-direction property, using, 195–196

animation-duration property, using, 193, 198

animation-fill-mode property, 196–197

animation-name property, using, 192, 198

animations. See also 3D animations; CSS Animations

adding delays, 195

applying to elements, 192

button-glow, 196

card flip behavior, 208, 210

enhancing banner ad with, 199–203

:hover/:focus rule, 208

menu-move, 193

moving <h1>, 210–212

multiple, 197–198

overflow: hidden, 201

running number of times, 193

shorthand, 197–198

sliding form, 211

triggering via JavaScript, 208–216

whoosh, 198

animation-timing-function, 194–195

anti-aliasing, 81

<article> element, 51–53

<aside> element, 54–55

Ates, Faruk, 67, 204

attr() function, using, 33

attribute CSS3 selector, 22, 27

<audio> element, 48, 50

control buttons, A-4–A-5

media styling, A-10–A-11

resources, A-11

SVG and <canvas>, A-10–A-11

wiring buttons with JavaScript, A-5–A-9

B

backface-visibility 3D transform, 174–177

background content, rendering, 140

background images

serving to small devices, 308

using in banner ads, 144

background-clip property, using, 140

background:radial-gradient, 126

backgrounds

attaching to elements, 132

gradients, 133

in IE versions, 135

using linear gradients on, 119

background-size, using gradients with, 134–135

banner ad. See also bling boxes

adding bling to, 142–146

animating flaming text, 202–203

background images, 144

enhancing with animations, 199–203

heavy metal example, 318–320

improving, 146

recommended size, 142

repeating radial gradient, 145

support for older browsers, 145–146

Bézier curves, cubic, 182

bling boxes. See also banner ad; CSS3 features

adding depth, 114–117

adding to banner ad, 142–146

advantages, 108

border-image property, 136–140

box-decoration break property, 141

box-shadow property, 114–117

browser support for, 109

disadvantages, 108

examples, 108

border-image property

applying, 136–138

central slice, 139

fragments, 138

problems, 139–140

providing space, 139

tiling sides, 138

url() syntax, 137

border-radius property, 110–113

Boulton, Mark, 142

box-decoration break property, using, 141

boxes. See bling boxes

box-shadow property, 114–117

browser support. See also mobile browsers; Modernizr

animations, 189

“bling box” features, 109

color units, 16

CSS selectors, 22–26

font formats, 74

indicating, 205

layout features, 243

rem units, 20, 206

responsive design features, 291

text features, 87, 94

transforms, 152

transitions, 179

browsers, history of, 284

Bulletproof CSS, 4, 77, 231

button, styling, 180

button-glow animation, specifying, 196

C

Caballero, Luz, 63

Calzadilla, Anthony, 204

<canvas> element, 62–63

capitalization, controlling, 100

captions, creating, 56–57

Cederholm, Dan, 9

character set, defining, 42–43

child CSS3 selector, 23, 25

Chrome

animations, 189

bling boxes, 109

CSS3 Color Units, 16

font formats, 74

layout features, 243

rem units, 20

responsive design features, 291

text features, 87, 94

transforms, 152

transitions, 179

Chrome Mobile

font formats, 74

text features, 87, 94

Clark, Keith, 34, 67

ClearType, use by Windows, 81

Collison, Simon, 86

column layouts, 5. See also CSS Multi-column layout module

content

generating, 26

thought process for, 10–11

corners, rounded, 110–113

CSS, Bulletproof, 4

CSS Animations. See also 3D animations; animations

at-rule block, 191

background-color, 191

browser support for, 189

keyframe blocks, 190–192

setting up, 190–192

website, 150

CSS Exclusions and Shapes layout module, 242, 277–279

CSS Flexible box layout module, 242

CSS Grids

layout module, 242

problems with, 274

CSS Multi-column layout module, 242. See also column layouts; layout modules

adjusting columns, 253

column breaks, 251

column gutters, 247

column-count property, 245

column-fill property, 248–249

column-gap property, 247

column-rule property, 247

column-span property, 249–250

column-width property, 246, 252

features, 244

lack of browser support, 254

limited scope, 254

parody Disney movie, 252–253

problems, 254

setting number of columns, 245

CSS Regions Module, 242, 275–277

CSS resets, using, 64

CSS sprites, using with icons, 227–228

CSS tables, applying, 305

CSS Transforms. See also 3D transforms

2D, 153–160

browser support for, 152

:focus effect, 163

:hover effect, 163

skew, 151

two- and three-dimensional, 152

website, 150

CSS Transitions. See also transitions

spec, 180

website, 150

CSS3

column layouts, 5

creation of, 4–5

dynamic UIs, 5

font embedding, 4

modules in, 4–5

CSS3 Color units, browser support for, 16–18

CSS3 features. See also bling boxes

CSS3 Color units, 16–18

sizing text using rems, 19–21

vendor prefixes, 14–16

CSS3 modules, 12–13

CSS3 selectors

adjacent sibling, 23

attribute, 22, 27

child, 23

descendant, 23

general sibling, 23

language, 24

negation, 24

negation pseudo-class, 28

pseudo-classes, 28–31

pseudo-elements, 26, 32–33

resource, 21

structural pseudo-classes, 25–26

target, 24

UI element pseudo-classes, 23–24

universal, 22

using with older browsers, 34

CSS3-man website, 204

css3-mediaqueries-js library, 65

CSS3PIE, 66–67

downloading, 112–113

gradients, 113

.htc file, 66

RGBA support, 113

support for IE versions, 130

using with box shadows, 117

CSS4 selectors module, 26

cubic Bézier curves, 182, 185

D

date and time, marking up, 57–58

datetime attribute, using, 57–58

Dead Hamster banner ad, 142–146, 199

descendant CSS3 selector, 23

design philosophies. See web design philosophy

Devlin, Ian, A-11

DHTML (dynamic HTML), 39

DOCTYPE, using, 41, 43

double-colon (::) syntax, 33

dynamic UIs, 5

E

elements. See also HTML5 elements

repeating patterns of, 29

selecting, 23, 26, 28

styling, 23–25

ellipsis;, using with text-overflow property, 90–91, 93

embedded video, implementing with HTML, 40

error messages, examples of, 61–62

Eye of Sauron, 167–168

F

feature detection library. See Modernizr

<figcaption> element, 56–57

<figure> element, 56–57

Firefox

animations, 189

bling boxes, 109

CSS3 Color Units, 16

font formats, 74

rem units, 20

responsive design features, 291

text features, 87, 94

transforms, 152

transitions, 179

Flexbox. See also layout modules

aligning children, 261–262

align-items property, 262

align-self property, 262

<articles> and <section>, 256

box-flex property, 268

browser support, 255

Cast container, 265

child <articles>, 264–265

child flow direction, 256–257

cross axis, 258

cross-browser with Modernizr, 267–268

display order of child elements, 259–260

display property, 255

Facts container, 265

flex property, 263–264

flex-flow property, 257–258

flexibility of, 263–267

flex-order property, 259

<header> content, 261

main axis, 258

syntax changes, 255

wrapping elements, 257

:focus effect, using with transforms, 163

font embedding, 4

font files

creating, 80

reducing, 233

font formats, browser support for, 74

font services, 85–86

font size, considering, 80

Font Squirrel

customizing fonts, 75–76

downloading fonts from, 75

@font-face generator, 75–76

@font-face kit, 82

Fontdeck service, 85–86

@font-face block, 73, 83–84

font-family declaration, including, 73

font-feature usage, 103–104

font-feature-settings property, 97–99

Fontforge, downloading, 80

fonts. See also text; typography; web fonts

adding to Holy Grail tribute site, 75–77

anti-aliasing, 81

browser bugs, 83–84

bulletproof syntax, 77

downloading, 73

glyphs in, 82

heading sizes, 82

OpenType, 74

overuse of, 82–83

quality of, 82–83

troubleshooting, 84

TrueType, 74

websites, 75

Fonts module, 73

Fonts service website, 79

font-style declaration, including, 74

font-weight declaration, including, 73–74

<footer> element, 54

form improvements. See also HTML5 form elements

consistency, A-12

pseudo-classes, A-12

selectors, A-12–A-15

form inputs, styling, 24

FOUT (flash of unstyled text), 78–84

fractions, declaring, 99

G

Gallagher, Nicolas, 64

Gasston, Peter, 267

GCPM (Generate Content for Paged Media), 243, 280

general sibling CSS3 selector, 23

Google

Fonts service, 79

webfont loader, 78

Google Code, HTML5 shiv, 45–46

graceful degradation, 8–9

gradients

features, 118

linear, 118–123

radial, 124–130

using with backgrounds, 133

grid layout examples, 272–274

grid structure. See also layout modules

defining, 269–270

grid-columns property, 270

grid-rows property, 270

grids

elements, 271

fitting content onto, 271–273

Gunther, Lars, 43

H

<header> element, 54

headings

determining levels of, 56

grouping, 56

heavy metal banner ad, 318–320

<hgroup> element, 56

Hicks, Jon, 216

high-fidelity devices, 316–317

highlighting words, 59

Holy Grail tribute site, 72, 75–77

Home icon

CSS applied to, 235–236

markup for, 235

:hover effect, using with transforms, 163

HSL, browser support for CSS 3 Color Units, 16–18

HSLA, browser support for CSS 3 Color Units, 16–18

HTML, trouble with 3D CSS, 178

HTML content, creating base of, 10

HTML Lint website, 47

HTML5. See also semantic HTML5; template

benefits, 39

browser support for, 40

DOCTYPE, 41

embedded video, 40

error handling, 40

features, 39

outlines, 56

sectioning, 56

shiv, 45–46

validating, 47

HTML5 elements. See also elements

<article>, 51–53

<aside>, 54–55

<audio>, 48–50

<canvas>, 62–63

<figcaption>, 56–57

<figure>, 56–57

<footer>, 54

<header>, 54

<hgroup>, 56

<mark>, 59

<nav>, 55

<section>, 51–53

<time>, 57–58

<video>, 48–50

HTML5 form elements, 60–62. See also form improvements

hyphenation, controlling, 92–93

I

IAB (Internet Advertising Bureau), 142

icons

arbitrary, 221

background images, 229–230

background-position property, 227

background-size property, 228–229

comparison, 222–223

CSS sprites, 227–228

emotion, 222–223

functionality, 222

generated content for, 226

guidelines for use of, 222–223

ideograms, 221

implementing, 224–230, 235–238

making bulletproof, 228–229

Media Queries, 228–229

min-width property, 228–229

navigation, 222

Peculiar set, 235–238

pictograms, 221

setting gradient on list item, 225

status, 222

user feedback, 222–223

web fonts as, 231–234

IE conditional comments, 68–69

IE Print Protector script, 46

IE versions

backgrounds in, 135

CSS3PIE, 130

gradient support for, 130–131

images, serving responsively, 308–310

Internet Explorer

animations, 189

bling boxes, 109

CSS3 Color Units, 16

font formats, 74

layout features, 243

rem units, 20–21

responsive design features, 291

text features, 87, 94

transforms, 152

transitions, 179

iOS

animations, 189

bling boxes, 109

CSS3 Color Units, 16

font formats, 74

layout features, 243

rem units, 20

responsive design features, 291

text features, 87, 94

transforms, 152

transitions, 179

Irish, Paul, 11, 204

“Bulletproof @font-face syntax,” 77

Modernizr library, 67

J

JavaScript, triggering animations with, 208–216

JavaScript libraries

css3-mediaqueries-js, 65

CSS3PIE, 66–67

Modernizr, 67

respond.js, 65

Selectivizr, 67

Jehl, Scott, 65

K

kerning text, 101

King Arthur example, adding fonts to, 75–77

Krug, Steve, 8

L

language CSS3 selector, 24

Lauke, Patrick, 62

Lawson, Bruce

HTML5 semantics, 53

HTML5 video player, 50

IE conditional comments, 69

layout modules. See also CSS Multi-column layout module; Flexbox; grid structure

CSS Exclusions and Shapes, 242, 277–279

CSS Flexible box, 242

CSS GCPM (Generate Content for Paged Media), 280

CSS Grids, 242

CSS Multi-column, 242

CSS Regions Level 3, 275–277

GCPM, 243

Regions, 242

layout techniques

containers, 292–293

max-width, 295–296

responsive media layouts, 293–296

layout width, setting upper bound on, 296

letters in elements, selecting, 26

ligatures

dealing with, 95–96

discretionary, 98

linear gradients

color stops, 121–122

negative unit values, 122

repeating, 123

RGBA colors, 122

syntax, 123

transparent colors, 122

using on backgrounds, 119

varying direction of, 118–120

links, styling, 23

list items, selecting, 30

M

Makeev, Vadim, 50

Manian, Divya, 11

Marin, Lucian, 235

<mark> element, 59

matrix 2D transform, 160

matrix3D transform, 165

Media Blitz site, 292, 297, 299, 306–307

media layouts, responsive, 293–296

media queries

applying, 299–301, 303–304

applying styles, 297–298

content breakpoints, 302

device breakpoints, 302

Mobile First technique, 306

not keyword, 298

orientation-based, 302

polyfills, 307

spec, 297

table-related properties, 305

testing features, 298–299

using, 302

viewport meta tag, 312–315

width-based, 302

menu-move animation, running, 193

<meta name="viewport">, 312–315

mime-types, described, 43

Miro Video Converter, 49

mobile browsers. See also browser support

browser width, 311

<meta name="viewport">, 312–315

optimizing content for, 311–312

rendering sites, 311–312

width/height media queries, 312

Mobile Chrome

animations, 189

CSS3 Color Units, 16

layout features, 243

rem units, 20

responsive design features, 291

transforms, 152

transitions, 179

Mobile First technique

advantage of, 308

using with media queries, 306

“mobile web,” explained, 289

Modernizr, 67. See also browser support

animating states, 215

animations and JavaScript, 208

applying to pages, 205

descendant selector, 206

downloading, 204

event listeners, 212

fallbacks, 216

if test, 214

providing alternative styles, 206–207

test, 213–214

transitions, 215

Monty Python example, 72, 186

muting video, 142

N

<nav> element, 55

Neal, Jonathan, 46

negation CSS3 selector, 24

negation pseudo-class, 28

normalize.css, using, 63

numerals

fractions, 99

ordinal, 99

tabular, 99

O

opacity, browser support for CSS3 Color Units, 16, 18

open standards, 6

OpenType fonts

numbers, 98–99

support for, 74

Opera

animations, 189

bling boxes, 109

CSS3 Color Units, 16

font formats, 74

layout features, 243

rem units, 20

text features, 87, 94

transforms, 152

transitions, 179

Opera Mini

animations, 189

bling boxes, 109

CSS3 Color Units, 16

disadvantages, 285

features, 285

layout features, 243

OBML (Opera Binary Markup Language) page, 285

rem units, 20

responsive design features, 291

simulator, 286

text features, 87, 94

transforms, 152

transitions, 179

Opera Mobile

animations, 189

bling boxes, 109

CSS3 Color Units, 16

Emulator, 287

font formats, 74

layout features, 243

rem units, 20

responsive design features, 291

text features, 87, 94

transforms, 152

transitions, 179

ordinal numerals, declaring, 99

P

Peculiar icon set, using, 235–238

perspective 3D transforms, 165–170

petite caps, using, 100

philosophy of web design, 6–9

polyfills, using with media queries, 307

prefixed properties, 15

progressive enhancement, 8–9

pseudo-classes, 28–31

pseudo-elements, 26, 32–33

Python, Monty, 72

R

radial gradients

circle closest-corner, 128

circle closest-side, 127

circle farthest-corner, 129

circle farthest-side, 128

closest-corner, 128

color stops, 129

contain keyword, 127

ellipse closest-corner, 128

ellipse closest-side, 127

ellipse farthest-corner, 129

ellipse farthest-side, 128

farthest-corner, 128

farthest-side, 128

keyword combinations, 128

keywords versus unit values, 125

position, 125

repeating, 130, 145

setting radii, 127

size and shape, 126–129

syntax, 124–125

using, 135

Regions Module, 242, 275–277

rems

dealing with, 206

using to size text, 19–21

rendering text, 95–96

respond.js library, 65

responsive design, 286–291

responsive media layouts, 293–296

RGBA, browser support for CSS 3 Color Units, 16–17

Robinson, Mike, 59

rotate

2D transform, 155–156

3D transforms, 162

rotate3D transform, 163–164

rounded corners, 110–114

S

Safari

animations, 189

bling boxes, 109

CSS3 Color Units, 16

font formats, 74

layout features, 243

rem units, 20

responsive design features, 291

text features, 87, 94

transforms, 152

transitions, 179

scale 2D transforms, 157–158

scale3D and scaleZ transforms, 165

<section> element, 51–55

Selectivizr library, 34, 67

selectors. See CSS3 selectors

Selectors Level 3 CSS3 module, 12

semantic HTML5. See also HTML5

cross-browser support, 44–46

versus HTML4, 38

Sexton, Alex, 67, 204

shadows, adding depth with, 114–117

Sharp, Remy, 45–46, 48

sites. See websites

Sivonen, Henri, 47

size units, 19

skew 2D transforms, 158–159

skew transform, example of, 151

small caps, using, 100

sprites, using with icons, 227

structural pseudo-classes CSS3 selector, 25–26

stylistic sets, 102–103

T

tables, applying, 305

tabular numerals, declaring, 99

Tan, Jon, 81

target CSS3 selector, 24

:target pseudo-class, 28–29

template. See also HTML5

browser support for, 44–46

building, 41–46

character set, 42–43

document outline, 41–42

HTML5 DOCTYPE, 41

language, 41–42

mime-types, 43

XHTML5 and coding styles, 43

text. See also fonts; typography

aligning, 92

capitalizing, 100

controlling hyphenation, 92–93

justifying, 92

ligatures, 95–96

sizing using rems, 19–21

using word-wrap with, 91

text effects, browser support for, 87

text overflow, controlling, 90–91

text rendering, optimizing, 95–96

text-shadow property, 88–90

<time> element, 57–58

transform-origin property, 156

transforms. See 3D transforms; CSS Transforms

transform-style property, using, 171–173

transition shorthand property, 15–16

transition-property: all, 188

transitions. See also CSS Transitions

altering rate of, 181–186

“bounce effect,” 185

browser support for, 179

cubic Bézier curves, 182, 185

cubic-bezier() value, 183

delaying, 181

ease values, 182

linear value, 182

multiple, 187–188

nested <div>s, 184–185

selecting items for, 180

selecting length of, 181

shorthand property, 187–188

steps() value, 183

transition-timing-function property, 181–183

translate 2D transforms, 153–154

translate3D transform, 160–161

TrueType fonts, support for, 74

Typekit font service, 85

typography. See also fonts; text; web fonts

font-feature usage, 103–104

font-feature-settings property, 97–99

kerning, 101

ligatures, 95–96

petite caps, 100

small caps, 100

stylistic sets, 102–103

text rendering, 95–96

U

UI element pseudo-classes CSS3 selector, 23–24

universal CSS3 selector, 22

usability, prioritizing, 8

V

validating HTML5, 47

vendor prefixes, 14–16

video

muting, 142

responsive, 310

video formats, converting between, 49

<video> element, 48–50

control buttons, A-4–A-5

controls attribute, 49

height attribute, 49

media styling, A-10–A-11

poster attribute, 49

resources, A-11

<source> attributes, 49

SVG and <canvas>, A-10–A-11

using in banner ad, 142

width attribute, 49

wiring buttons with JavaScript, A-5–A-9

@viewport rule spec, accessing, 314

W

W3C

Current Work page, 12

WOFF standard, 74

web browsers. See browser support

web design philosophy, 6–9

web fonts. See also fonts; text; typography

added bandwidth, 80

creating text characters, 232

FOUT (flash of unstyled text), 78–84

HTML5 data- attribute, 233

as icons, 231–234

problems, 78–84

storing text characters, 233

using, 73

Windows rendering problems, 81–82

webfont loader, 78–79

WebGL, article about, 63

-webkit- prefixes properties, 15

websites

Adaptive Images technique, 309

Backgrounds and Borders Level 3 module, 13

<canvas> tutorials, 63

CSS Animations, 13, 150

CSS Color module, 12

CSS Exclusions and Shapes layout module, 242, 277

CSS Flexible box layout module, 13, 242

CSS Fonts Level 3 module, 12

CSS Grids layout module, 242

CSS Image Values and Replaced Content Level 3 module, 13

CSS Multi-column layout module, 13, 242

CSS Regions Level 3 module, 275

CSS Text Level 3 module, 12

CSS Transitions, 13, 150

CSS3 and HTML5 features, 11

CSS3 Color units, 16–18

CSS3 modules, 12

CSS3-man, 204

css3-mediaqueries-js library, 65

CSS3PIE, 112–113

CSS4 selectors module, 26

“Display type and the raster wars,” 81

font services, 85

Font Squirrel, 75

Fontdeck, 85

Fontforge, 80

fonts, 75

Fonts module, 73

Fonts service, 79

GCPM (Generate Content for Paged Media), 280

GCPM layout module, 243

Google Fonts service, 79

HTML Lint, 47

HTML5 and CSS3 features, 11

HTML5 elements, 48

HTML5 form elements, 62

HTML5 sectioning and outlines, 56

IAB (Internet Advertising Bureau), 142

IE conditional comments, 69

<mark> element, 59

Media Queries module, 12, 297

Miro Video Converter, 49

Modernizr library, 67

normalize.css, 64

Regions layout module, 242

respond.js library, 65

Selectivizr, 34

Selectors Level 3 module, 12

size units, 19

Typekit, 85

“Use the whole font” showcase, 97

video players, A-11

@viewport rule spec, 314

W3C Current Work page, 12

W3C WOFF standard, 74

webfont loader from Google, 78

WebGL, 63

WebType font service, 85

whoosh animation, duration of, 198

Wilcox, Matt, 309

Windows ClearType, 81

words, highlighting, 59

word-wrap, using, 91

Wroblewski, Luke, 306

X

X, Y, and Z axes, 154

XHTML5 and coding styles, 43

Z

zebra stripes, creating, 25, 30

zooming feature, including, 314