Table of Contents for

CSS Secrets

Index

Symbols

(pseudo)random backgrounds, 62-65

.avatar, 337-340, 343

.lightbox, 235

3D rotation, for trapezoids, 109-113

::backdrop, for dimming, 238

:nth-child() pseudo-class, 178, 271-275

:only-child, 272

<blink>, 314

<code> element, 182

<dd>, 173-177

<dialog>, 238

<div>, 252

<dt>, 173-177

<labels>, 229

<main>, 241

<path>, 211

<pre> element, 182

<span>, 189, 210

<textPath>, 211

@font-face, 189

(soft hyphens), 168

A

absolute positioning, for vertical centering, 281

acceleration, timing function and, 296-299

affordance, 225

align-items, vertical centering and, 286

ampersands, fancy, 188-193

Anderson, James, 280

animated GIFs, shortcomings of, 308

animation, 294-345

along a circular path, 334-345

blinking, 314-318

bouncing, 295-299

converting to transition, 301

duration vs. effectiveness, 321

elastic transitions, 294-305

for pie charts, 119-121

frame-by-frame, 308-312

smooth state, 328-332

typing, 320-326

animation-direction, 316, 339

animation-playstate, 332

animation-timing-function, 296

APNG, 309

assumptions, xxiv

Atlas system, xxii

automatic table layout algorithm, 266

B

background(s)

(pseudo)random, 62-65

and inner-rounded borders, 37

and zebra-striped lines, 180

checkerboards, 55-60

complex patterns, 50-60

diagonal stripes, 43-47

flexible positioning, 32-35

fluid with fixed content, 276-279

grids, 52

polka dots, 53

striped, 40-48

vertical stripes, 43

background-attachment, 246

background-blend mode, 141

background-clip, 26, 70, 225

background-image, text underlining and, 196

background-origin, 33

background-position, 33, 310, 330

background-size

for (pseudo)random backgrounds, 62-65

for stripes, 43

beveled corners, 96, 157-159

Bézier curves, 298

blending modes

filters vs., 142

for color tinting, 141-143

for interactive image comparison, 259

blinking, 314-318

blinking caret, 323

block elements, 173

blur() filter, 149

blurring, for de-emphasis, 240-243

border-bottom, 195

border-box, 26

border-image

for curved cutout corners, 102-105

limitations of, 68

with gradients, 73

border-radius

for ellipses, 76-81

for pie charts, 116

borders, 24

continuous image, 68-74

inner rounding of, 36-38

multiple, 28-30

translucent, 24-26

Bos, Bert, 5

bouncing animations, 295-299

bouncing effect, 294

box-shadow

and extension of clickable area, 226

and inner-rounded borders, 37

for dimming, 237

for multiple borders, 29

for one-sided shadows, 130

with irregular drop shadows, 134

box-sizing, 30

brevity, maintainability vs., 12

brightness() filter, 242

browser support, xxix-xxxiv

buttons, 10-12

parallelograms and, 84

regular v. toggle, 232

toggle buttons, 231

C

calc() (function)

and vertical centering, 282

for flexible background positioning, 35

for sticky footers, 290

callouts, elastic transitions for, 300-304

caret, blinking, 323

cell cursor, 219

Centering in the Unknown (Chris Coyier), 281

centering, vertical, 280-286

ch unit, 323

checkboxes

custom, 228-232

toggle buttons vs., 232

checked (pseudo-class), 229

checkerboards, 55-60

Cicada Principle, The, 63, 65

circular path, animations along, 334-345

circular text, 210-214

clickable area, extending, 224-227

clip-path

for cutout corners, 105-107

for diamond images, 93

clipped top border, 73

code duplication, minimizing, 9-12

coding tips, 9-22

and eyes behavior, 15

and Responsive Web Design, 15-17

currentColor, 13

inheritance, 13

maintainability vs. brevity, 12

minimize code duplication, 9-12

preprocessors, 19-22

shorthand use, 17-19

color, 11

and elastic transitions, 305

currentColor, 13

for pie charts, 115

with curved cutout corners, 104

with flexible subtle stripes, 48

color stops

and checkerboard patterns, 56

and striped backgrounds, 44

for grids, 52

color tinting, 138-143

blending modes for, 141-143

filters for, 139

column widths, table, 266-268

complex background patterns, 50-60

checkerboards, 55-60

grids, 52

polka dots, 53

continuous image borders, 68-74

contrast() filter, 242

control points, 298

corners, cutout, 96-107

Coyier, Chris, 281, 334

CSS

recent growth and transformation of, xvii

standards/specifications, 2-8

CSS 1, 5

CSS 2, 5

CSS 3, 6

CSS Working Group (CSS WG), 2-8

cubic-bezier () function, 298-299, 302

currentColor, 13

cursors

built-in, 218-221

hiding, 221

indicating disabled state, 220

curved cutout corners, 100

cutout corners, 96-107

clipping path method for, 105-107

curved, 100

gradients for, 97

inline SVG/border-image method, 102-105

D

de-emphasis

by blurring, 240-243

by dimming, 234-238

definition lists, line breaks for, 172

diagonal stripes, 43-47

diamond images, 90-94

dimming

backdrop method, 238

de-emphasis by, 234-238

pseudo-element method, 236

disabled state, cursor, 220

discretionary ligatures, 184

display: flex

and vertical centering, 285

for sticky footers, 291

drop shadows, irregular, 134-137

drop-shadow () filter, 135, 137

DRY programming, xviii

duplication of code, minimizing, 9-12

E

ease (keyword), 296

Eden, Dan, 300

elastic transitions, 294-305

bouncing animations, 295-299

for callouts, 300-304

ellipses

flexible, 76-81

half, 79-81

quarter, 81

extended background-position method, 33

extending the clickable area, 224-227

extruded text, 206

eye, human, 15

F

fill (keyword), 103

fill: none, 213

filter(s)

blending modes vs., 142

for color tinting, 139

for interactive image comparison, 259

with irregular drop shadows, 135

Fitts Law, 224

Fitts, Paul, 224

fixed content, fluid backgrounds with, 276-279

fixed table layout algorithm, 268

flex-flow, 291

Flexbox

for vertical centering, 285

flexible background positioning, 32-35

background-origin method for, 33

calc() method for, 35

extended backgrounds for, 33

flexible ellipses, 76-81

flexible subtle stripes, 48

fluid backgrounds, fixed content with, 276-279

folded corner effect, 156-165

for 45° angles, 157-159

for angles other than 45°, 159-165

font size, 10

font-family declarations, 189

font-variant-ligatures, 185

footers, sticky, 288-292

footnote border, 73

formats and conventions, xxvi

frame-by-frame animations, 308-312

frosted glass effect, 146-154

future sections, xxviii

G

Gallagher, Nicolas, 87, 156

Gaussian blur algorithm, 131

GIFs, animated, shortcomings of, 308

glowing text, 205

glyphs, ligatures as, 184

Google Reader, 244

Google+, 334

gradient-based patterns, 71

gradients, for cutout corners, 97

Greedy algorithm, 169

Gregor, Aryeh, 340

H

habrahabr.ru, 334

half ellipses, 79-81

Hattab, Hakim El, 243

hiding the cursor, 221

hue-rotate() filter, 140

hyphenation, 168-170

hyphens: auto, 169

I

image comparison, interactive, 250-259

CSS resize method for, 251-254

range input method for, 255-259

image, as border, 68

infinite (keyword), 324

inherit (keyword), 13

inheritance, 13

inline SVG, 102-105, 211

inner border radius, 100

inner rounding (borders), 36-38

interactive image comparison, 250-259

intrinsic sizing, 262-264

irregular drop shadows, 134-137

J

Jacobs, Ian, 5

JavaScript

for frame-by-frame animation, 309

for typing animation, 324

justification, text, 168

justify-content, 286

K

Knuth-Pass algorithm, 169

Komarov, Roman, 249

L

latency, 20

Law of Leaky Abstractions, 20

layout, 262-292

fluid backgrounds with fixed content, 276-279

intrinsic sizing, 262-264

sticky footers, 288-292

styling by sibling count, 270-275

table column widths, 266-268

vertical centering, 280-286

least common multiple (LCM), for (pseudo)random backgrounds, 64

letterpress effect, 201

Lie, Håkon Wium, 5

ligatures, 184-186

Lilley, Chris, 5

line breaks, inserting, 172-177

linear gradient

and grids, 52

and striped backgrounds, 41

for cutout corners, 97

lines, text, zebra-striped, 178-181

local() function, 190

longhands, 18

M

maintainability, brevity vs., 12

marching ants border, 72

margin: auto, 277, 285

max-width, 264

McClellan, Drew, 193

media queries, 15-17

Meyer, Eric, 66

min-content (keyword), 263

mix-blend mode, 141

modal dialog, 238

Montulli, Lou, 314

mouse pointer, 218

Mozilla, 309

multiple borders, 28-30

box-shadow for, 29

outlines for, 30

N

negative animation delays, 119-121

nested elements, for parallelograms, 85

nested transforms, 337

not-allowed cursor, 220

O

one-sided shadows, 130-133

optical illusions, 15, 200

outline-offset, 30

outlines, for multiple borders, 30

overflow: hidden, 116, 152

overflow: visible, 213

P

parallelograms, 84-87

pattern, as border, 68

pie charts

SVG solution for, 122-128

transform-based solution for, 115

pie charts, simple, 114-128

PNG sprite animation, 309-312

polka dot backgrounds, 53

polygon(), for diamond images, 93

position: relative/absolute, 86

preprocessors, 19-22

for complex background patterns, 50

for folded-corner effect, 165

prerequisites, xxv

prime numbers, for (pseudo)random backgrounds, 65

pseudo-elements

for parallelograms, 86

for pie charts, 116

pseudo-elements

for dimming, 236

for pie charts, 117

for trapezoids, 110

mouse interaction capture by, 226

Pythagorean theorem, 160

and inner-rounded borders, 38

and striped backgrounds, 44

for curved cutout corners, 103

Q

quarter ellipses, 81

R

radial gradients

for curved cutout corners, 100

for polka dots, 53

random backgrounds, 62-65

readability, justification and, 168

repeating-linear-gradient(), 45-47

repeating-radial-gradient(), 45

resize, for interactive image comparison, 251-254

Responsive Web Design (RWD), 15-17

rotate() transform

for animation along circular path, 337-340

for diamond images, 91

for parallelograms, 87

for pie charts, 117

rounding, inner (borders), 36-38

S

Saly, Martijn, 105

saturate () filter, 139

scale() transform

for diamond images, 92

for elastic transitions, 302

scrolling, 244-249

Seddon, Ryan, 231

shadows

irregular drop, 134-137

on one side, 130-132

on two adjacent sides, 132

on two opposite sides, 133

one-sided, 130-133

shapes, 76-128

cutout corners, 96-107

diamond images, 90-94

flexible ellipses, 76-81

half ellipses, 79-81

parallelograms, 84-87

pie charts, 114-128

quarter ellipses, 81

trapezoid tabs, 108-113

shorthands, use of, 17-19

sibling count, styling by, 270-275

simple pie charts, 114-128

Simurai, 312

sizing, intrinsic, 262-264

skew() transform, 84

slider control, 256-259

smooth state animations, 328-332

soft hyphens (), 168

spread radius, 29, 131

sprite animation, 309-312

steps() timing function, 311, 317, 322

sticky footers, 288-292

Storey, Dudley, 66, 144, 259, 264

striped backgrounds, 40-48

diagonal stripes, 43-47

flexible subtle stripes, 48

vertical stripes, 43

striped text lines, 178-181

stroke-dasharray, 122-126

stroked text, 203

style elements, sibling count and, 270-275

SVG

for checkerboard patterns, 59

for pie charts, 122-128

T

tab width adjustments, 182

tab-size, 183

table-layout (property), 266

tables

column widths, 266-268

zebra-striped lines in, 178-181

text effects

circular text, 210-214

extruded text, 206

glowing text, 205

letterpress, 201

realistic, 200-208

stroked text, 203

typing animation, 320-326

text justification, 168

text lines, zebra-striped, 178-181

text underlines, custom, 194-197

text-decoration: blink, 315

text-shadow

and extruded text, 207

and glowing text, 205

and letterpress effect, 202

and stroked text, 203

and text underlining, 197

with irregular drop shadows, 137

three-dimensional (3D) rotation, for trapezoids, 109-113

timing function, 296-299

tinting, 138-143

toggle buttons, 231

transform(s)

and parallelograms, 86

for diamond images, 91

for pie charts, 115, 117

for trapezoids, 109-113

interdependence of transform functions, 341

transform-origin, 163

for trapezoids, 111

translate() vs., 340

transform-style, vertical centering and, 283

transition-duration, 304

transition-property, 305

transition-timing-function, 296

transitions and animations, 294-345

animations along a circular path, 334-345

blinking, 314-318

converting animation to transition, 301

elastic transitions, 294-305

frame-by-frame animations, 308-312

smooth state animations, 328-332

typing animation, 320-326

translate()

and vertical centering, 282

for animation along circular path, 343

transform-origin vs., 340

translucent borders, 24-26

transparency, gray checkerboard patterns for depicting, 55

trapezoid tabs, 108-113

triangles

and folded corner effect, 156-165

for checkerboard patterns, 55

typing animation, 320-326

typography, 168-214

circular text, 210-214

custom underlines, 194-197

extruded text effect, 206

fancy ampersands, 188-193

glowing text effect, 205

hyphenation, 168-170

inserting line breaks, 172-177

letterpress effect, 201

ligatures, 184-186

realistic text effects, 200-208

stroked text effect, 203

tab width adjustments, 182

zebra-striped text lines, 178-181

U

underlines, custom, 194-197

unicode-range descriptor, 191

user experience, 218-259

cursor selection, 218-221

custom checkboxes, 228-232

de-emphasis by blurring, 240-243

de-emphasis by dimming, 234-238

extending the clickable area, 224-227

interactive image comparison, 250-259

scrolling, 244-249

toggle buttons, 231

V

vendor prefixes, 6-8

vertical centering, 280-286

absolute positioning for, 281

Flexbox for, 285

viewport unit for, 284

vertical stripes, 43

viewBox, 212

viewport units, 237

vintage envelope themed border, 71

visual effects, 130-165

color tinting, 138-143

folded corner effect, 156-165

frosted glass effect, 146-154

irregular drop shadows, 134-137

one-sided shadows, 130-133

W

W3C (World Wide Web Consortium), 2

Walker, Alex, 63, 65

web standards, 2-8

and CSS evolution, 5

and vendor prefixes, 6-8

creation process, 2-4

WET programming, xviii

white-space:, 174

Wichary, Marcin, 198

word wrapping, 169

wrapping, word, 169

Z

z-index, 235

zebra-striped text lines, 178-181