Pro HTML5 and CSS3 Design Patterns

(avery) #1

INDEX


CSS3 multiple backgrounds, 321
HTML, 320
pad class, 323
rounded rectangle images, 322–323
Semi-transparent, 300–301
Shadowed
background-position, 317
block elements, 319
CSS, 318
HTML, 318
image creation, 314, 315
nested block elements, 315, 316
shadow-lb.jpg indents, 314, 315
shadow-rt.jpg and shadow-lb.jpg,
314, 315
shadow-rt.jpg indents, 314, 315
src attribute, 295
Inline Alert, 476–477
Inline Block Quote, 460–461
Inline Quote, 462–463

J, K

JavaScript Alert, 466–467

L

Layouts, 381
Button
client-side image map, 417
CSS, 414
HTML, 414, 416
JavaScript events, 415
page.js, 416
server/reset form elements, 415
Event Styling, 397
CSS selector, 397
HTML, 396
jQuery, 397
page.js, 396–397
runtime elements, 396
Float Divider, 390–391
Floating Section
CSS, 388
HTML, 388
Internet Explorer 7, 389
section design pattern, 389
Fluid Layout, 393

columns and rows, 383, 393
CSS, 382, 392
HTML, 382, 392
Flyout Menu
add, remove and toggle functions,
413
CSS, 410
drop-down menu, 413
flyout-trigger class, 411
HTML, 410, 412
list-style-type, 413
page.js, 412
Layout Example
body and main section, 425
CSS structural styles, 424
design patterns, 425–426
footer section, 425
header section, 425
HTML structural elements, 424
nav and extra sections, 425
postheader section, 425
preheader section, 425
title section, 425
Links, 418–419
Multi-column Layout, 420–421
Opposing Floats, 394–395
Outside-in Box
CSS, 384
HTML, 384
vs. inside-out design, 386–388
outer width, 385
Rollup
CSS, 398
HTML, 398, 400
JavaScript, 401
page.js, 400
rollup-trigger class, 399
screenreader-only design pattern,
399
Tab Menu
CSS, 402–404
HTML, 402, 404
list items, 405
tab’s box style, 405
Tabs, 409
CSS, 406
first click() function, 409
HTML, 406, 408
Free download pdf