Pro HTML5 and CSS3 Design Patterns

INDEX

CSS, 442

HTML, 442

image cannot be displayed, 444

text replacement design pattern, 443

top-offset sized absolute element

design pattern, 443

+VALUE, 444

Padded Graphical

background color/image, 435

CSS, 434

HTML, 434

inline element, 435

F

First-letter Drop Cap, 430–431

Floating Alert, 484–85
Floating Drop Cap, 436–437
Floating Graphical Drop Cap, 438–439

Fluid Layout Overview, 382–383

G

Graphical Alert, 480–481

H

Hanging Alert, 478–479
Hanging Drop Cap, 432–433

Highlight white-on-firebrick, 209
Horizontal-aligned Content, 252–253
HTML design patterns, 33

block elements, 35, 41

Class and ID Attributes, 58–59

Conditional Style Sheet, 48–49

DOCTYPE, 44

almost-standards mode, 45

vs. content type, 44

quirks and standards mode, 45

strict and transitional, 45

Header Elements, 46–47

HTML Whitespace, 60–61

Inline Elements, 35, 41, 56–57

Multi-purpose Block Elements, 54–55

Structural Block Elements, 50–51

structural elements, 41

Terminal Block Elements, 52–53

XHTML, 41–43

HTML structure, design patterns

block elements, 35, 41

inline elements, 41

structural elements, 41

I

Images, 293

Basic Shadowed Image, 312–313

Content over Background Image, 306–

307

Content over Image

block element, 305

CSS, 304

HTML, 304

inline decoration design pattern,

305

Crater Lake pictures, 294

CSS Sprite

bitcons, 310

CSS, 308

Google Load Time Analyzer, 311

history, 311

HTML, 308

HTTP and TCP/IP communications

protocol, 311

MSN home page, 311

multiple background images, 309

16•16 sprites offsets, 310

decorative images, 295

Fade-out

CSS, 298

gradient image and mask, 299

gray gradients, Internet explorer 6,

299

HTML, 298

GIF format, 295

Image Map

HTML, 296

map element, 297

real-world map, 297

JPG format, 295

Northwest USA, 324–325

PNG format, 295

Replaced Text, 302–303

Rounded Corners

block and inline elements, 321

CSS, 320