2D transforms
applying, 159
matrix
, 160
scale
, scaleX
, scaleY
, 157–158
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
matrix3D
, 165
rotateX
, rotateY
, rotateZ
, 162
scale3D
and scaleZ
, 165
translate3D
, translateZ
, 160–161
trouble with, 178
::
(double-colon) syntax, 33
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
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
enhancing banner ad with, 199–203
:hover/:focus
rule, 208
menu-move
, 193
overflow: hidden
, 201
running number of times, 193
sliding form, 211
triggering via JavaScript, 208–216
whoosh
, 198
animation-timing-function
, 194–195
anti-aliasing, 81
attr()
function, using, 33
attribute CSS3 selector, 22, 27
resources, A-11
wiring buttons with JavaScript, A-5–A-9
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
animating flaming text, 202–203
background images, 144
enhancing with animations, 199–203
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
advantages, 108
border-image
property, 136–140
box-decoration break
property, 141
browser support for, 109
disadvantages, 108
examples, 108
border-image
property
central slice, 139
fragments, 138
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
browser support. See also mobile browsers; Modernizr
animations, 189
“bling box” features, 109
color units, 16
font formats, 74
indicating, 205
layout features, 243
responsive design features, 291
transforms, 152
transitions, 179
browsers, history of, 284
button, styling, 180
button-glow
animation, specifying, 196
Caballero, Luz, 63
Calzadilla, Anthony, 204
capitalization, controlling, 100
Cederholm, Dan, 9
character set, defining, 42–43
Chrome
animations, 189
bling boxes, 109
CSS3 Color Units, 16
font formats, 74
layout features, 243
rem units, 20
responsive design features, 291
transforms, 152
transitions, 179
Chrome Mobile
font formats, 74
ClearType, use by Windows, 81
Collison, Simon, 86
column layouts, 5. See also CSS Multi-column layout module
content
generating, 26
CSS, Bulletproof, 4
CSS Animations. See also 3D animations; animations
at-rule block, 191
background-color
, 191
browser support for, 189
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-gap
property, 247
column-rule
property, 247
column-width
property, 246, 252
features, 244
lack of browser support, 254
limited scope, 254
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
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
dynamic UIs, 5
font embedding, 4
CSS3 Color units, browser support for, 16–18
CSS3 features. See also bling boxes
adjacent sibling, 23
child, 23
descendant, 23
general sibling, 23
language, 24
negation, 24
negation pseudo-class, 28
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
gradients, 113
.htc
file, 66
RGBA support, 113
support for IE versions, 130
using with box shadows, 117
CSS4 selectors module, 26
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
double-colon (::
) syntax, 33
dynamic UIs, 5
elements. See also HTML5 elements
repeating patterns of, 29
ellipsis;
, using with text-overflow
property, 90–91, 93
embedded video, implementing with HTML, 40
error messages, examples of, 61–62
feature detection library. See Modernizr
Firefox
animations, 189
bling boxes, 109
CSS3 Color Units, 16
font formats, 74
rem units, 20
responsive design features, 291
transforms, 152
transitions, 179
Flexbox. See also layout modules
align-items
property, 262
align-self
property, 262
<articles>
and <section>, 256
box-flex
property, 268
browser support, 255
Cast container, 265
cross axis, 258
cross-browser with Modernizr, 267–268
display order of child elements, 259–260
display
property, 255
Facts container, 265
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 size, considering, 80
Font Squirrel
downloading fonts from, 75
@font-face
kit, 82
font-family
declaration, including, 73
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
bulletproof syntax, 77
downloading, 73
glyphs in, 82
heading sizes, 82
OpenType, 74
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
form inputs, styling, 24
FOUT (flash of unstyled text), 78–84
fractions, declaring, 99
Gallagher, Nicolas, 64
Gasston, Peter, 267
GCPM (Generate Content for Paged Media), 243, 280
general sibling CSS3 selector, 23
Fonts service, 79
webfont loader, 78
Google Code, HTML5 shiv, 45–46
gradients
features, 118
using with backgrounds, 133
grid structure. See also layout modules
grid-columns
property, 270
grid-rows
property, 270
grids
elements, 271
Gunther, Lars, 43
<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
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
validating, 47
HTML5 elements. See also elements
<footer>
, 54
<header>
, 54
<hgroup>
, 56
<mark>
, 59
<nav>
, 55
HTML5 form elements, 60–62. See also form improvements
hyphenation, controlling, 92–93
IAB (Internet Advertising Bureau), 142
icons
arbitrary, 221
background-position
property, 227
background-size
property, 228–229
functionality, 222
generated content for, 226
guidelines for use of, 222–223
ideograms, 221
implementing, 224–230, 235–238
navigation, 222
pictograms, 221
setting gradient on list item, 225
status, 222
IE conditional comments, 68–69
IE Print Protector script, 46
IE versions
backgrounds in, 135
CSS3PIE, 130
images, serving responsively, 308–310
Internet Explorer
animations, 189
bling boxes, 109
CSS3 Color Units, 16
font formats, 74
layout features, 243
responsive design features, 291
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
transforms, 152
transitions, 179
“Bulletproof @font-face
syntax,” 77
Modernizr library, 67
JavaScript, triggering animations with, 208–216
JavaScript libraries
css3-mediaqueries-js, 65
Modernizr, 67
respond.js, 65
Selectivizr, 67
Jehl, Scott, 65
kerning text, 101
King Arthur example, adding fonts to, 75–77
Krug, Steve, 8
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
GCPM, 243
Regions, 242
layout techniques
responsive media layouts, 293–296
layout width, setting upper bound on, 296
letters in elements, selecting, 26
ligatures
discretionary, 98
linear gradients
negative unit values, 122
repeating, 123
RGBA colors, 122
syntax, 123
transparent colors, 122
using on backgrounds, 119
links, styling, 23
list items, selecting, 30
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
content breakpoints, 302
device breakpoints, 302
Mobile First technique, 306
not
keyword, 298
orientation-based, 302
polyfills, 307
spec, 297
table-related properties, 305
using, 302
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
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
transitions, 215
muting video, 142
<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
opacity, browser support for CSS3 Color Units, 16, 18
open standards, 6
OpenType fonts
support for, 74
Opera
animations, 189
bling boxes, 109
CSS3 Color Units, 16
font formats, 74
layout features, 243
rem units, 20
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
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
transforms, 152
transitions, 179
ordinal numerals, declaring, 99
Peculiar icon set, using, 235–238
perspective
3D transforms, 165–170
petite caps, using, 100
polyfills, using with media queries, 307
prefixed properties, 15
Python, Monty, 72
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
setting radii, 127
using, 135
rems
dealing with, 206
respond.js library, 65
responsive media layouts, 293–296
RGBA, browser support for CSS 3 Color Units, 16–17
Robinson, Mike, 59
rotate
3D transforms, 162
Safari
animations, 189
bling boxes, 109
CSS3 Color Units, 16
font formats, 74
layout features, 243
rem units, 20
responsive design features, 291
transforms, 152
transitions, 179
scale3D
and scaleZ
transforms, 165
selectors. See CSS3 selectors
Selectors Level 3 CSS3 module, 12
semantic HTML5. See also HTML5
versus HTML4, 38
shadows, adding depth with, 114–117
sites. See websites
Sivonen, Henri, 47
size units, 19
skew
transform, example of, 151
small caps, using, 100
sprites, using with icons, 227
structural pseudo-classes CSS3 selector, 25–26
tables, applying, 305
tabular numerals, declaring, 99
Tan, Jon, 81
target CSS3 selector, 24
template. See also HTML5
HTML5 DOCTYPE, 41
mime-types, 43
XHTML5 and coding styles, 43
text. See also fonts; typography
aligning, 92
capitalizing, 100
controlling hyphenation, 92–93
justifying, 92
using word-wrap with, 91
text effects, browser support for, 87
text overflow, controlling, 90–91
text rendering, optimizing, 95–96
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
“bounce effect,” 185
browser support for, 179
cubic-bezier()
value, 183
delaying, 181
ease
values, 182
linear
value, 182
selecting items for, 180
selecting length of, 181
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-settings
property, 97–99
kerning, 101
petite caps, 100
small caps, 100
UI element pseudo-classes CSS3 selector, 23–24
universal CSS3 selector, 22
usability, prioritizing, 8
validating HTML5, 47
video
muting, 142
responsive, 310
video formats, converting between, 49
controls
attribute, 49
height
attribute, 49
poster
attribute, 49
resources, A-11
<source>
attributes, 49
using in banner ad, 142
width
attribute, 49
wiring buttons with JavaScript, A-5–A-9
@viewport
rule spec, accessing, 314
W3C
Current Work page, 12
WOFF standard, 74
web browsers. See browser support
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
storing text characters, 233
using, 73
Windows rendering problems, 81–82
WebGL, article about, 63
-webkit-
prefixes properties, 15
Adaptive Images technique, 309
Backgrounds and Borders Level 3 module, 13
<canvas>
tutorials, 63
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
CSS3 and HTML5 features, 11
CSS3 modules, 12
CSS3-man, 204
css3-mediaqueries-js library, 65
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
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, Y, and Z axes, 154
XHTML5 and coding styles, 43
zebra stripes, creating, 25, 30
zooming feature, including, 314
3.145.71.115