CSS Cookbook, 3rd Edition (Animal Guide)

Table of Contents......Page 9
Foreword......Page 17
Preface......Page 19
Assumptions This Book Makes......Page 20
Contents of This Book......Page 22
Using Code Examples......Page 24
Safari® Books Online......Page 25
Acknowledgments......Page 26
Structuring Documents......Page 27
HTML Is Document Structure......Page 28
Discussion......Page 29
Solution......Page 30
Discussion......Page 31
Solution......Page 32
Why not use the latest DOCTYPE?......Page 34
Solution......Page 36
Solution......Page 38
See Also......Page 39
Problem......Page 40
Character case sensitivity......Page 41
Discussion......Page 42
Solution......Page 43
Discussion......Page 44
Solution......Page 45
Problem......Page 46
Discussion......Page 47
Discussion......Page 48
Linking to another web page on the same site......Page 49
Using the root relative link......Page 50
Problem......Page 51
Discussion......Page 52
Solution......Page 53
Problem......Page 54
Solution......Page 55
Creating an HTML validator bookmarklet......Page 56
See Also......Page 57
2.0  Introduction......Page 59
Solution......Page 61
Discussion......Page 62
See Also......Page 63
Solution......Page 64
Discussion......Page 65
Type selectors......Page 66
Class selectors......Page 67
ID selectors......Page 70
Universal selectors......Page 71
Discussion......Page 73
See Also......Page 75
Solution......Page 77
See Also......Page 78
CSS3 pseudo-classes......Page 79
Solution......Page 80
Discussion......Page 81
Solution......Page 82
Discussion......Page 84
HTML5 divisions......Page 85
Discussion......Page 87
Solution......Page 88
Discussion......Page 89
Solution......Page 96
Discussion......Page 97
When to use internal stylesheets......Page 98
Problem......Page 99
Discussion......Page 100
The user controls his experience......Page 102
Solution......Page 103
Discussion......Page 104
Solution......Page 105
Discussion......Page 106
Solution......Page 109
Solution......Page 110
Discussion......Page 111
Discussion......Page 112
Solution......Page 114
Problem......Page 115
Solution......Page 116
Solution......Page 118
Discussion......Page 120
Solution......Page 121
Discussion......Page 122
See Also......Page 123
Solution......Page 124
Problem......Page 125
Solution......Page 126
Discussion......Page 127
Creating a CSS validator bookmarklet......Page 128
See Also......Page 129
3.0  Introduction......Page 131
Discussion......Page 132
Inheriting fonts throughout a web page......Page 133
Solution......Page 135
Discussion......Page 136
Extending web-safe font listings......Page 137
Discussion......Page 138
See Also......Page 139
Solution......Page 140
Discussion......Page 141
The problem with embedded fonts......Page 142
Other techniques......Page 143
Solution......Page 144
Length units......Page 145
See Also......Page 146
Solution......Page 147
Using pixels......Page 148
Using em units to control type......Page 149
Solution......Page 151
Problem......Page 152
Discussion......Page 153
Solution......Page 154
Discussion......Page 155
Solution......Page 156
Solution......Page 157
Discussion......Page 158
Discussion......Page 159
Problem......Page 161
Solution......Page 162
Problem......Page 163
Discussion......Page 164
Solution......Page 165
Discussion......Page 166
Problem......Page 167
Solution......Page 168
Solution......Page 169
See Also......Page 170
Solution......Page 171
Problem......Page 172
Solution......Page 173
Discussion......Page 174
Solution......Page 175
Problem......Page 176
Solution......Page 177
Discussion......Page 178
Solution......Page 179
Hanging indents safely......Page 180
The paired hanging indent......Page 181
Discussion......Page 182
See Also......Page 183
Discussion......Page 184
Solution......Page 185
Discussion......Page 186
Problem......Page 187
Problem......Page 189
Solution......Page 190
Problem......Page 191
Creating a bevel look......Page 192
Text shadow for Internet Explorer......Page 193
Solution......Page 194
Discussion......Page 195
Best practices......Page 196
Problem......Page 197
Solution......Page 198
Solution......Page 199
Problem......Page 201
Known issues......Page 202
See Also......Page 203
Solution......Page 205
Discussion......Page 206
See Also......Page 207
Solution......Page 208
Specifying corners......Page 209
Solution......Page 210
See Also......Page 211
Solution......Page 212
Solution......Page 213
Discussion......Page 214
See Also......Page 216
Solution......Page 217
Shorthand properties......Page 218
See Also......Page 219
Discussion......Page 220
Discussion......Page 223
Problem......Page 225
Discussion......Page 226
Using background-size......Page 228
Solution......Page 229
Keeping images from expanding......Page 230
Solution......Page 231
Solution......Page 232
Discussion......Page 233
Setting gradients in Safari......Page 234
See Also......Page 236
Discussion......Page 237
Solution......Page 238
Discussion......Page 239
See Also......Page 240
Solution......Page 241
Solution......Page 243
Fahrner Image Replacement method......Page 244
Problem with the Phark method......Page 245
Solution......Page 246
Discussion......Page 247
Solution......Page 248
Discussion......Page 249
Solution......Page 253
Discussion......Page 255
Solution......Page 256
Discussion......Page 259
Solution......Page 261
See Also......Page 264
Discussion......Page 265
Different sizes......Page 266
Specific corners......Page 267
Solution......Page 268
See Also......Page 269
Solution......Page 270
Discussion......Page 271
See Also......Page 272
Solution......Page 273
See Also......Page 276
Solution......Page 277
Discussion......Page 278
See Also......Page 279
Solution......Page 280
No images are safe......Page 281
Solution......Page 282
Known browser issues......Page 283
Solution......Page 284
See Also......Page 285
Discussion......Page 286
See Also......Page 287
Solution......Page 288
See Also......Page 289
Solution......Page 291
Discussion......Page 292
See Also......Page 293
Solution......Page 294
Discussion......Page 295
Extending CSS reset......Page 297
Solution......Page 298
Discussion......Page 299
Color scroll bars in IE8......Page 300
Solution......Page 301
Discussion......Page 302
Images......Page 303
Vertical centering......Page 304
Solution......Page 306
Discussion......Page 307
See Also......Page 308
Solution......Page 309
See Also......Page 310
Solution......Page 311
Discussion......Page 312
Solution......Page 313
Discussion......Page 315
Making a slideshow......Page 316
Known browser issues......Page 317
Discussion......Page 318
Browser support......Page 319
Solution......Page 320
Supporting Internet Explorer......Page 321
See Also......Page 323
Problem......Page 325
Discussion......Page 327
See Also......Page 328
Discussion......Page 329
Discussion......Page 330
See Also......Page 331
Solution......Page 332
Discussion......Page 333
Problem......Page 334
Stopping inheritance......Page 335
Solution......Page 337
Problem......Page 339
Solution......Page 340
Discussion......Page 341
See Also......Page 343
Solution......Page 344
Problem......Page 345
Discussion......Page 346
Problem......Page 347
Discussion......Page 348
Solution......Page 349
Using generated content......Page 353
See Also......Page 354
Solution......Page 355
Solution......Page 357
Using CSS3......Page 360
Solution......Page 361
Discussion......Page 365
See Also......Page 366
Problem......Page 367
Solution......Page 368
Problem......Page 369
Discussion......Page 370
See Also......Page 371
Solution......Page 372
Solution......Page 373
Problem......Page 374
Problem......Page 375
Discussion......Page 376
Discussion......Page 377
Discussion......Page 379
Solution......Page 380
Timing function......Page 381
Transition property......Page 382
See Also......Page 383
Problem......Page 384
Solution......Page 385
Setting up the list......Page 386
Styling the links......Page 387
See Also......Page 388
Solution......Page 389
Limiting styles......Page 390
Problem......Page 391
Solution......Page 392
Discussion......Page 394
See Also......Page 397
Solution......Page 398
Drop-down menus over Flash......Page 399
Discussion......Page 400
Problem......Page 401
Solution......Page 403
See Also......Page 404
Discussion......Page 405
Leahy-Langridge image replacement......Page 407
Pixy method......Page 408
Problem......Page 409
Solution......Page 410
Discussion......Page 411
Solution......Page 412
See Also......Page 414
Problem......Page 415
Solution......Page 416
Discussion......Page 417
Solution......Page 418
Discussion......Page 421
See Also......Page 422
8.0  Introduction......Page 423
Discussion......Page 424
Solution......Page 425
Discussion......Page 427
Solution......Page 428
Problem......Page 429
Problem......Page 430
Discussion......Page 431
Discussion......Page 432
Solution......Page 434
Search field attributes......Page 435
Solution......Page 437
Discussion......Page 439
Problem......Page 441
Solution......Page 442
Solution......Page 443
Discussion......Page 444
Problem......Page 445
Discussion......Page 446
See Also......Page 447
Problem......Page 448
Solution......Page 449
Discussion......Page 450
Problem......Page 451
Solution......Page 452
See Also......Page 453
Discussion......Page 454
Solution......Page 455
See Also......Page 456
Solution......Page 457
Discussion......Page 459
8.20  Sample Design: A Login Form......Page 460
8.21  Sample Design: A Registration Form......Page 467
Problem......Page 479
Solution......Page 480
Defining border cells......Page 481
Solution......Page 482
Solution......Page 483
Discussion......Page 484
Solution......Page 486
Discussion......Page 488
Solution......Page 490
Solution......Page 491
Discussion......Page 493
Solution......Page 494
See Also......Page 495
9.10  Sample Design: An Elegant Calendar......Page 496
Problem......Page 507
Media types......Page 508
Using @media when assigning media types......Page 509
Solution......Page 510
Discussion......Page 511
Problem......Page 512
Solution......Page 513
Discussion......Page 514
Adding user friendliness......Page 515
Solution......Page 516
Placing the domain name before absolute links......Page 517
Discussion......Page 518
Problem......Page 519
Using class selectors......Page 520
Setting the Page for Black-and-White Printing......Page 521
Designing the Main Heading......Page 523
Styling the Article Header and Byline......Page 524
Gaining Attention Through the Teaser......Page 526
Displaying URIs After Links......Page 527
Finishing with the Footer......Page 528
Solution......Page 531
Creating a fixed-width column......Page 532
Problem......Page 533
Solution......Page 534
Discussion......Page 535
Flipping the layout......Page 536
Solution......Page 537
Discussion......Page 538
Flipping the layout......Page 539
Solution......Page 540
Solution......Page 543
Discussion......Page 544
See Also......Page 545
Solution......Page 546
Discussion......Page 547
Known issues......Page 548
Solution......Page 549
Problem......Page 550
Solution......Page 551
The markup......Page 554
Defining the columns......Page 556
Creating whitespace......Page 561
Adjusting the order of columns......Page 563
Faking columns......Page 565
An alternative solution......Page 569
Solution......Page 570
Discussion......Page 572
Solution......Page 573
Discussion......Page 574
Resolution independence without JavaScript......Page 575
See Also......Page 576
12.0  Introduction......Page 577
Problem......Page 578
Discussion......Page 579
Discussion......Page 580
Discussion......Page 581
See Also......Page 582
Discussion......Page 583
Using jQuery......Page 584
Solution......Page 585
Discussion......Page 586
See Also......Page 587
Problem......Page 588
See Also......Page 589
Solution......Page 590
Problem......Page 591
Solution......Page 592
See Also......Page 593
13.0  Introduction......Page 595
Solution......Page 596
Solution......Page 597
Discussion......Page 599
Problem......Page 600
Discussion......Page 601
Problem......Page 602
See Also......Page 603
See Also......Page 604
Problem......Page 605
Solution......Page 606
Discussion......Page 607
Problem......Page 608
Discussion......Page 609
Solution......Page 610
Animation keyframes......Page 611
Animation properties......Page 612
Problem......Page 614
See Also......Page 615
See Also......Page 616
Solution......Page 617
Setting the Page......Page 619
Constricting the Content......Page 622
Bringing in the Logo......Page 623
The Navigation Menu......Page 625
The Secondary Link Menu......Page 627
Styling the Content Column......Page 628
Working on the Smaller Column......Page 630
Finishing with the Footer......Page 632
The Final Touches......Page 634
The Basic Markup......Page 635
Creating the Easel......Page 637
Creating Stripes......Page 639
Creating Stars......Page 641
Adding Texture......Page 645
Problem......Page 649
See Also......Page 650
Discussion......Page 651
Higher-resolution design......Page 652
Solution......Page 653
Problem......Page 654
Discussion......Page 655
Problem......Page 656
Discussion......Page 657
Solution......Page 658
Discussion......Page 659
Solution......Page 660
Solution......Page 661
See Also......Page 663
Solution......Page 664
Solution......Page 665
Solution......Page 666
Discussion......Page 667
Problem......Page 668
Discussion......Page 669
See Also......Page 670
General HTML and CSS Instruction......Page 671
Design Resources......Page 672
References......Page 673
Tools......Page 675
Appendix B. CSS 2.1 Properties and Proprietary\n  Extensions......Page 677
Appendix C. CSS 2.1 Selectors, Pseudo-Classes, and Pseudo-Elements......Page 695
Appendix D. CSS3 Selectors and Pseudo-Classes......Page 699
Anatomy of the Appendix......Page 703
Tested CSS Properties......Page 704
Input Element for Checkboxes......Page 705
background-color......Page 707
background-image......Page 708
border: 0;......Page 709
border-color......Page 710
border-style......Page 711
border-width......Page 712
color......Page 713
font-family......Page 714
font-size......Page 715
font-weight......Page 716
height......Page 717
letter-spacing......Page 718
line-height......Page 719
margin......Page 720
padding......Page 721
text-align......Page 722
text-decoration......Page 723
text-indent......Page 724
width......Page 725
Input Element for File Uploads......Page 726
background-color......Page 728
background-image......Page 729
border: 0;......Page 730
border-color......Page 731
border-style......Page 732
border-width......Page 733
color......Page 734
font-family......Page 735
font-size......Page 736
font-weight......Page 737
height......Page 738
line-height......Page 739
margin......Page 740
padding......Page 741
text-align......Page 742
text-decoration......Page 743
text-indent......Page 744
width......Page 745
Input Element for Radio Buttons......Page 746
background-color......Page 748
background-image......Page 749
border: 0;......Page 750
border-color......Page 751
border-style......Page 752
border-width......Page 753
color......Page 754
font-family......Page 755
font-size......Page 756
font-weight......Page 757
height......Page 758
letter-spacing......Page 759
line-height......Page 760
margin......Page 761
padding......Page 762
text-align......Page 763
text-decoration......Page 764
text-indent......Page 765
width......Page 766
Input Element for Text......Page 767
background-color......Page 769
background-image......Page 770
border: 0;......Page 771
border-color......Page 772
border-style......Page 773
border-width......Page 774
color......Page 775
font-family......Page 776
font-size......Page 777
font-weight......Page 778
height......Page 779
line-height......Page 780
margin......Page 781
padding......Page 782
text-align......Page 783
text-decoration......Page 784
text-indent......Page 785
width......Page 786
Select Element for Multiple Options......Page 787
background-color......Page 789
background-image......Page 790
border: 0;......Page 791
border-color......Page 792
border-style......Page 793
border-width......Page 794
color......Page 795
font-family......Page 796
font-size......Page 797
font-weight......Page 798
height......Page 799
letter-spacing......Page 800
line-height......Page 801
margin......Page 802
padding......Page 803
text-align......Page 804
text-decoration......Page 805
text-indent......Page 806
width......Page 807
Select Element for Single Options......Page 808
background-color......Page 810
background-image......Page 811
border: 0;......Page 812
border-color......Page 813
border-style......Page 814
border-width......Page 815
color......Page 816
font-family......Page 817
font-size......Page 818
font-weight......Page 819
height......Page 820
line-height......Page 821
margin......Page 822
padding......Page 823
text-align......Page 824
text-decoration......Page 825
text-indent......Page 826
width......Page 827
Submit Element......Page 828
background-color......Page 830
background-image......Page 831
border: 0;......Page 832
border-color......Page 833
border-style......Page 834
border-width......Page 835
color......Page 836
font-family......Page 837
font-size......Page 838
font-weight......Page 839
height......Page 840
letter-spacing......Page 841
line-height......Page 842
margin......Page 843
padding......Page 844
text-align......Page 845
text-decoration......Page 846
text-indent......Page 847
width......Page 848
Textarea Element......Page 849
background-color......Page 851
background-image......Page 852
border: 0;......Page 853
border-color......Page 854
border-style......Page 855
border-width......Page 856
color......Page 857
font-family......Page 858
font-size......Page 859
font-weight......Page 860
height......Page 861
letter-spacing......Page 862
line-height......Page 863
margin......Page 864
padding......Page 865
text-align......Page 866
text-decoration......Page 867
text-indent......Page 868
width......Page 869
word-spacing......Page 870
Index......Page 871
Wow! eBook......Page 0