├── 10 ├── .DS_Store ├── banner.html ├── html5shiv.js ├── logo.png └── styles.css ├── 11 ├── form │ ├── form.html │ └── global.css └── table │ ├── css │ └── main.css │ ├── images │ ├── star.png │ └── underline.png │ └── table.html ├── 13 ├── .DS_Store ├── html5shiv.js ├── main.txt ├── sidebar1.txt ├── sidebar2.txt ├── start.html └── styles.css ├── 14 ├── .DS_Store ├── html5shiv.js ├── imgs │ ├── .DS_Store │ ├── clouds.jpg │ ├── gator.jpg │ ├── jellyfish.jpg │ └── mule.jpg ├── new-source-order.html ├── rwd.html └── styles.css ├── 15 ├── fonts │ ├── TitilliumText22L001-webfont.eot │ ├── TitilliumText22L001-webfont.svg │ ├── TitilliumText22L001-webfont.ttf │ ├── TitilliumText22L001-webfont.woff │ ├── TitilliumText22L002-webfont.eot │ ├── TitilliumText22L002-webfont.svg │ ├── TitilliumText22L002-webfont.ttf │ ├── TitilliumText22L002-webfont.woff │ ├── TitilliumText22L003-webfont.eot │ ├── TitilliumText22L003-webfont.svg │ ├── TitilliumText22L003-webfont.ttf │ ├── TitilliumText22L003-webfont.woff │ ├── TitilliumText22L004-webfont.eot │ ├── TitilliumText22L004-webfont.svg │ ├── TitilliumText22L004-webfont.ttf │ ├── TitilliumText22L004-webfont.woff │ ├── TitilliumText22L005-webfont.eot │ ├── TitilliumText22L005-webfont.svg │ ├── TitilliumText22L005-webfont.ttf │ ├── TitilliumText22L005-webfont.woff │ ├── TitilliumText22L006-webfont.eot │ ├── TitilliumText22L006-webfont.svg │ ├── TitilliumText22L006-webfont.ttf │ ├── TitilliumText22L006-webfont.woff │ └── stylesheet.css ├── hats.html ├── html5shiv.js ├── images │ ├── file0001117960982.jpg │ ├── file0001425538258.jpg │ ├── file0001728857809.jpg │ ├── file0001757413591.jpg │ ├── file00030009680.jpg │ ├── file000308999292.jpg │ ├── file000330568599.jpg │ ├── file000550955311.jpg │ ├── file000705145690.jpg │ ├── file00079963469.jpg │ ├── file8341308807137.jpg │ └── hat.png └── styles.css ├── 16 ├── css │ └── main.css ├── images │ ├── about_title.png │ ├── bg_about.jpg │ ├── link_arrow.png │ ├── link_arrow_rt.png │ ├── logo.png │ └── screen.png └── print.html ├── 17 └── reset.css ├── .gitignore ├── 02 ├── another_page.html ├── basic.html └── images │ ├── .DS_Store │ ├── bg_page.png │ ├── head-icon.png │ └── tractor.png ├── 02_finished ├── .DS_Store ├── another_page.html ├── basic.html ├── images │ ├── .DS_Store │ ├── bg_page.png │ ├── head-icon.png │ └── tractor.png ├── inline.html ├── internal.html └── styles.css ├── 03 ├── images │ ├── banner.png │ └── bg_page.png └── selector_basics.html ├── 03_finished ├── images │ ├── banner.png │ └── bg_page.png └── selector_basics.html ├── 04 ├── images │ └── headline.png └── inheritance.html ├── 04_finished ├── images │ └── headline.png └── inheritance.html ├── 05 ├── cascade.html ├── images │ ├── bg_body.png │ └── bullet_flower.png ├── reset.css └── styles.css ├── 05_finished ├── cascade.html ├── images │ ├── bg_body.png │ └── bullet_flower.png ├── reset.css └── styles.css ├── 06 ├── at-font-face.css ├── fonts │ ├── PTSansBold.eot │ ├── PTSansBold.svg │ ├── PTSansBold.ttf │ ├── PTSansBold.woff │ ├── PTSansBoldItalic.eot │ ├── PTSansBoldItalic.svg │ ├── PTSansBoldItalic.ttf │ ├── PTSansBoldItalic.woff │ ├── PTSansItalic.eot │ ├── PTSansItalic.svg │ ├── PTSansItalic.ttf │ ├── PTSansItalic.woff │ ├── PTSansRegular.eot │ ├── PTSansRegular.svg │ ├── PTSansRegular.ttf │ └── PTSansRegular.woff ├── images │ ├── bg_banner.jpg │ └── bg_body.png ├── reset.css └── text.html ├── 06_finished ├── at-font-face.css ├── fonts │ ├── PTSansBold.eot │ ├── PTSansBold.svg │ ├── PTSansBold.ttf │ ├── PTSansBold.woff │ ├── PTSansBoldItalic.eot │ ├── PTSansBoldItalic.svg │ ├── PTSansBoldItalic.ttf │ ├── PTSansBoldItalic.woff │ ├── PTSansItalic.eot │ ├── PTSansItalic.svg │ ├── PTSansItalic.ttf │ ├── PTSansItalic.woff │ ├── PTSansRegular.eot │ ├── PTSansRegular.svg │ ├── PTSansRegular.ttf │ └── PTSansRegular.woff ├── images │ ├── bg_banner.jpg │ └── bg_body.png ├── reset.css └── text.html ├── 07 ├── images │ ├── banner.png │ └── bg_page.png └── sidebar.html ├── 07_finished ├── images │ ├── banner.png │ └── bg_page.png └── sidebar.html ├── 08 ├── .DS_Store ├── 01_image_ex │ ├── image.html │ └── styles.css ├── 02_gallery_ex │ ├── gallery.html │ └── styles.css ├── 03_bg_ex │ ├── bg_images.html │ ├── images │ │ ├── bg_main.jpg │ │ ├── bg_page.png │ │ ├── bullet.png │ │ ├── scroll_bottom.jpg │ │ ├── scroll_middle.jpg │ │ ├── scroll_top.jpg │ │ └── underline.png │ └── styles.css ├── html5shiv.js └── images │ ├── Thumbs.db │ ├── bluegrass.jpg │ ├── carpet.jpg │ ├── dandelion.jpg │ ├── grass.jpg │ ├── leaves.jpg │ ├── pattern.jpg │ └── trowel.jpg ├── 08_finished ├── .DS_Store ├── 01_image_ex │ ├── image.html │ └── styles.css ├── 02_gallery_ex │ ├── gallery.html │ └── styles.css ├── 03_bg_ex │ ├── bg_images.html │ ├── bg_images_ie8.html │ ├── images │ │ ├── bg_main.jpg │ │ ├── bg_page.png │ │ ├── bullet.png │ │ ├── scroll_bottom.jpg │ │ ├── scroll_middle.jpg │ │ ├── scroll_top.jpg │ │ └── underline.png │ └── styles.css ├── html5shiv.js └── images │ ├── Thumbs.db │ ├── bluegrass.jpg │ ├── carpet.jpg │ ├── dandelion.jpg │ ├── grass.jpg │ ├── leaves.jpg │ ├── pattern.jpg │ └── trowel.jpg ├── 09 ├── links │ ├── images │ │ ├── acrobat.png │ │ ├── bg_banner.jpg │ │ ├── bg_body.png │ │ ├── check.gif │ │ ├── email.gif │ │ ├── globe.png │ │ ├── word.png │ │ └── zip.png │ ├── links.html │ ├── main.css │ ├── test.html │ ├── test2.html │ └── test3.html └── nav_bar │ ├── images │ ├── home.png │ └── nav.png │ └── nav_bar.html ├── 09_finished ├── links │ ├── images │ │ ├── acrobat.png │ │ ├── bg_banner.jpg │ │ ├── bg_body.png │ │ ├── check.gif │ │ ├── email.gif │ │ ├── globe.png │ │ ├── word.png │ │ └── zip.png │ ├── links.html │ ├── main.css │ ├── test.html │ ├── test2.html │ └── test3.html └── nav_bar │ ├── images │ ├── home.png │ └── nav.png │ ├── nav_bar.html │ ├── nav_bar_horizontal.html │ └── nav_bar_vertical.html ├── 10_finished ├── .DS_Store ├── banner.html ├── html5shiv.js ├── logo.png └── styles.css ├── 11_finished ├── form │ ├── form.html │ └── global.css └── table │ ├── css │ └── main.css │ ├── images │ ├── star.png │ └── underline.png │ └── table.html ├── 13_finished ├── .DS_Store ├── html5shiv.js ├── main.txt ├── sidebar1.txt ├── sidebar2.txt ├── start.html └── styles.css ├── 14_finished ├── html5shiv.js ├── imgs │ ├── clouds.jpg │ ├── gator.jpg │ ├── jellyfish.jpg │ └── mule.jpg ├── rwd.html └── styles.css ├── 15_finished ├── fonts │ ├── TitilliumText22L001-webfont.eot │ ├── TitilliumText22L001-webfont.svg │ ├── TitilliumText22L001-webfont.ttf │ ├── TitilliumText22L001-webfont.woff │ ├── TitilliumText22L002-webfont.eot │ ├── TitilliumText22L002-webfont.svg │ ├── TitilliumText22L002-webfont.ttf │ ├── TitilliumText22L002-webfont.woff │ ├── TitilliumText22L003-webfont.eot │ ├── TitilliumText22L003-webfont.svg │ ├── TitilliumText22L003-webfont.ttf │ ├── TitilliumText22L003-webfont.woff │ ├── TitilliumText22L004-webfont.eot │ ├── TitilliumText22L004-webfont.svg │ ├── TitilliumText22L004-webfont.ttf │ ├── TitilliumText22L004-webfont.woff │ ├── TitilliumText22L005-webfont.eot │ ├── TitilliumText22L005-webfont.svg │ ├── TitilliumText22L005-webfont.ttf │ ├── TitilliumText22L005-webfont.woff │ ├── TitilliumText22L006-webfont.eot │ ├── TitilliumText22L006-webfont.svg │ ├── TitilliumText22L006-webfont.ttf │ ├── TitilliumText22L006-webfont.woff │ └── stylesheet.css ├── hats.html ├── html5shiv.js ├── images │ ├── file0001117960982.jpg │ ├── file0001425538258.jpg │ ├── file0001728857809.jpg │ ├── file0001757413591.jpg │ ├── file00030009680.jpg │ ├── file000308999292.jpg │ ├── file000330568599.jpg │ ├── file000550955311.jpg │ ├── file000705145690.jpg │ ├── file00079963469.jpg │ ├── file8341308807137.jpg │ └── hat.png └── styles.css ├── 16_finished ├── css │ ├── main.css │ └── print.css ├── images │ ├── about_title.png │ ├── bg_about.jpg │ ├── link_arrow.png │ ├── link_arrow_rt.png │ ├── logo.png │ └── screen.png └── print.html └── webfonts-demo ├── .DS_Store ├── PTSansBold.eot ├── PTSansBold.svg ├── PTSansBold.ttf ├── PTSansBold.woff ├── PTSansBoldItalic.eot ├── PTSansBoldItalic.svg ├── PTSansBoldItalic.ttf ├── PTSansBoldItalic.woff ├── PTSansItalic.eot ├── PTSansItalic.svg ├── PTSansItalic.ttf ├── PTSansItalic.woff ├── PTSansRegular.eot ├── PTSansRegular.svg ├── PTSansRegular.ttf ├── PTSansRegular.woff ├── webfonts-ie-safe.html └── webfonts.html /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /02/images/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/02/images/.DS_Store -------------------------------------------------------------------------------- /02/images/bg_page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/02/images/bg_page.png -------------------------------------------------------------------------------- /02/images/head-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/02/images/head-icon.png -------------------------------------------------------------------------------- /02/images/tractor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/02/images/tractor.png -------------------------------------------------------------------------------- /02_finished/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/02_finished/.DS_Store -------------------------------------------------------------------------------- /02_finished/images/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/02_finished/images/.DS_Store -------------------------------------------------------------------------------- /02_finished/images/bg_page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/02_finished/images/bg_page.png -------------------------------------------------------------------------------- /02_finished/images/head-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/02_finished/images/head-icon.png -------------------------------------------------------------------------------- /02_finished/images/tractor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/02_finished/images/tractor.png -------------------------------------------------------------------------------- /02_finished/styles.css: -------------------------------------------------------------------------------- 1 | html { 2 | padding-top: 25px; 3 | background-image: url(images/bg_page.png); 4 | } 5 | body { 6 | width: 80%; 7 | padding: 20px; 8 | margin: 0 auto; 9 | box-shadow: 10px 10px 10px rgba(0,0,0,.5); 10 | background-color: #E1EDEB; 11 | } 12 | h1 { 13 | font-family: 'Gravitas One', 'Arial Black', serif; 14 | font-weight: normal; 15 | color: #666666; 16 | font-size: 3em; 17 | margin: 0; 18 | } 19 | 20 | p { 21 | font-family: "Palatino Linotype", Baskerville, serif; 22 | color: #616161; 23 | line-height: 150%; 24 | margin-top: 10px; 25 | margin-left: 60px; 26 | } 27 | h2 { 28 | color: #B1967C; 29 | font-family: 'Gravitas One', 'Arial Black', serif; 30 | font-weight: normal; 31 | font-size: 2.2em; 32 | border-bottom: 2px white solid; 33 | background: url(images/head-icon.png) no-repeat 10px 10px; 34 | padding: 0 0 2px 60px; 35 | margin: 0; 36 | } 37 | .intro { 38 | color: #6A94CC; 39 | font-family: Arial, Helvetica, sans-serif; 40 | font-size: 1.2em; 41 | margin-left: 0; 42 | margin-bottom: 25px; 43 | } 44 | -------------------------------------------------------------------------------- /03/images/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/03/images/banner.png -------------------------------------------------------------------------------- /03/images/bg_page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/03/images/bg_page.png -------------------------------------------------------------------------------- /03_finished/images/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/03_finished/images/banner.png -------------------------------------------------------------------------------- /03_finished/images/bg_page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/03_finished/images/bg_page.png -------------------------------------------------------------------------------- /04/images/headline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/04/images/headline.png -------------------------------------------------------------------------------- /04/inheritance.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Inheritance In Action 6 | 7 | 8 | 9 |
CSS: The Missing Manual 10 |
11 |

The Amazing World of CSS

12 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia eos qui ratione voluptatem sequi nesciunt. Learn more about CSS at the W3C CSS Home Page.

13 | 18 |

Who Knew CSS Had Such Power?

19 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia eos qui ratione voluptatem sequi nesciunt. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

20 |

Not Me!

21 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia eos qui ratione voluptatem sequi nesciunt. odi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

22 |

Me Neither!

23 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia eos qui ratione voluptatem sequi nesciunt.

24 | 25 | 26 | -------------------------------------------------------------------------------- /04_finished/images/headline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/04_finished/images/headline.png -------------------------------------------------------------------------------- /04_finished/inheritance.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Inheritance In Action 6 | 22 | 23 | 24 |
CSS: The Missing Manual 25 |
26 |

The Amazing World of CSS

27 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia eos qui ratione voluptatem sequi nesciunt. Learn more about CSS at the W3C CSS Home Page.

28 | 33 |

Who Knew CSS Had Such Power?

34 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia eos qui ratione voluptatem sequi nesciunt. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

35 |

Not Me!

36 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia eos qui ratione voluptatem sequi nesciunt. odi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

37 |

Me Neither!

38 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia eos qui ratione voluptatem sequi nesciunt.

39 | 40 | 41 | -------------------------------------------------------------------------------- /05/images/bg_body.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/05/images/bg_body.png -------------------------------------------------------------------------------- /05/images/bullet_flower.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/05/images/bullet_flower.png -------------------------------------------------------------------------------- /05/reset.css: -------------------------------------------------------------------------------- 1 | /* reset browser styles */ 2 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 3 | table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 4 | figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, 5 | time, mark, audio, video { 6 | margin: 0; 7 | padding: 0; 8 | border: 0; 9 | font-size: 100%; 10 | vertical-align: baseline; 11 | } 12 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 13 | display: block; 14 | } 15 | body { 16 | line-height: 1.2; 17 | } 18 | ol { 19 | padding-left: 1.4em; 20 | list-style: decimal; 21 | } 22 | ul { 23 | padding-left: 1.4em; 24 | list-style: square; 25 | } 26 | table { 27 | border-collapse: collapse; 28 | border-spacing: 0; 29 | } 30 | /* end reset browser styles */ -------------------------------------------------------------------------------- /05/styles.css: -------------------------------------------------------------------------------- 1 | /* reset browser styles */ 2 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 3 | table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 4 | figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, 5 | time, mark, audio, video { 6 | margin: 0; 7 | padding: 0; 8 | border: 0; 9 | font-size: 100%; 10 | font: inherit; 11 | vertical-align: baseline; 12 | } 13 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 14 | display: block; 15 | } 16 | body { 17 | line-height: 1.2; 18 | } 19 | ol { 20 | padding-left: 1.4em; 21 | list-style: decimal; 22 | } 23 | ul { 24 | padding-left: 1.4em 25 | list-style: square; 26 | } 27 | table { 28 | border-collapse: collapse; 29 | border-spacing: 0; 30 | } 31 | /* end reset browser styles */ 32 | 33 | /* basic layout -- 2 columns */ 34 | .main { 35 | float: left; 36 | width: 580px; 37 | } 38 | .sidebar { 39 | margin-left: 600px; 40 | padding: 15px; 41 | background: #E9F5FE; 42 | } 43 | 44 | -------------------------------------------------------------------------------- /05_finished/images/bg_body.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/05_finished/images/bg_body.png -------------------------------------------------------------------------------- /05_finished/images/bullet_flower.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/05_finished/images/bullet_flower.png -------------------------------------------------------------------------------- /05_finished/reset.css: -------------------------------------------------------------------------------- 1 | /* reset browser styles */ 2 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 3 | table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 4 | figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, 5 | time, mark, audio, video { 6 | margin: 0; 7 | padding: 0; 8 | border: 0; 9 | font-size: 100%; 10 | font: inherit; 11 | vertical-align: baseline; 12 | } 13 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 14 | display: block; 15 | } 16 | body { 17 | line-height: 1.2; 18 | } 19 | ol { 20 | padding-left: 1.4em; 21 | list-style: decimal; 22 | } 23 | ul { 24 | padding-left: 1.4em; 25 | list-style: square; 26 | } 27 | table { 28 | border-collapse: collapse; 29 | border-spacing: 0; 30 | } 31 | /* end reset browser styles */ -------------------------------------------------------------------------------- /05_finished/styles.css: -------------------------------------------------------------------------------- 1 | /* reset browser styles */ 2 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 3 | table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 4 | figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, 5 | time, mark, audio, video { 6 | margin: 0; 7 | padding: 0; 8 | border: 0; 9 | font-size: 100%; 10 | font: inherit; 11 | vertical-align: baseline; 12 | } 13 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 14 | display: block; 15 | } 16 | body { 17 | line-height: 1.2; 18 | } 19 | ol { 20 | padding-left: 1.4em; 21 | list-style: decimal; 22 | } 23 | ul { 24 | padding-left: 1.4em 25 | list-style: square; 26 | } 27 | table { 28 | border-collapse: collapse; 29 | border-spacing: 0; 30 | } 31 | /* end reset browser styles */ 32 | 33 | /* basic layout -- 2 columns */ 34 | .main { 35 | float: left; 36 | width: 580px; 37 | } 38 | .sidebar { 39 | margin-left: 600px; 40 | padding: 15px; 41 | background: #E9F5FE; 42 | } 43 | 44 | body { 45 | color: #B1967C; 46 | font-family: "Palatino Linotype", Baskerville, serif; 47 | padding-top: 115px; 48 | background: #CDE6FF url(images/bg_body.png) repeat-x; 49 | width: 800px; 50 | margin: 0 auto; 51 | } 52 | h1 { 53 | font-size: 3em; 54 | font-family: "Arial Black", Arial, sans-serif; 55 | margin-bottom: 15px; 56 | } 57 | 58 | h2 { 59 | font-size: 2.2em; 60 | color: #AFC3D6; 61 | margin-bottom: 5px; 62 | } 63 | .main h2 { 64 | color: #E8A064; 65 | border-bottom: 2px white solid; 66 | background: url(images/bullet_flower.png) no-repeat; 67 | padding: 0 0 2px 80px; 68 | } 69 | 70 | .main p { 71 | color: #616161; 72 | font-family: "Palatino Linotype", Baskerville, serif; 73 | font-size: 1.1em; 74 | line-height: 150%; 75 | margin-bottom: 10px; 76 | margin-left: 80px; 77 | } 78 | p.intro { 79 | color: #6A94CC; 80 | font-family: Arial, Helvetica, sans-serif; 81 | font-size: 1.2em; 82 | margin-left: 0; 83 | margin-bottom: 15px; 84 | } 85 | -------------------------------------------------------------------------------- /06/at-font-face.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'PTSans'; 3 | src: url('fonts/PTSansRegular.eot'); 4 | src: url('fonts/PTSansRegular.eot?#iefix') format('embedded-opentype'), 5 | url('fonts/PTSansRegular.woff') format('woff'), 6 | url('fonts/PTSansRegular.ttf') format('truetype'), 7 | url('fonts/PTSansRegular.svg') format('svg'); 8 | font-weight: normal; 9 | font-style: normal; 10 | } 11 | @font-face { 12 | font-family: 'PTSans'; 13 | src: url('fonts/PTSansItalic.eot'); 14 | src: url('fonts/PTSansItalic.eot?#iefix') format('embedded-opentype'), 15 | url('fonts/PTSansItalic.woff') format('woff'), 16 | url('fonts/PTSansItalic.ttf') format('truetype'), 17 | url('fonts/PTSansItalic.svg') format('svg'); 18 | font-weight: normal; 19 | font-style: italic; 20 | } 21 | @font-face { 22 | font-family: 'PTSans'; 23 | src: url('fonts/PTSansBold.eot'); 24 | src: url('fonts/PTSansBold.eot?#iefix') format('embedded-opentype'), 25 | url('fonts/PTSansBold.woff') format('woff'), 26 | url('fonts/PTSansBold.ttf') format('truetype'), 27 | url('fonts/PTSansBold.svg') format('svg'); 28 | font-weight: bold; 29 | font-style: normal; 30 | } 31 | @font-face { 32 | font-family: 'PTSans'; 33 | src: url('fonts/PTSansBoldItalic.eot'); 34 | src: url('fonts/PTSansBoldItalic.eot?#iefix') format('embedded-opentype'), 35 | url('fonts/PTSansBoldItalic.woff') format('woff'), 36 | url('fonts/PTSansBoldItalic.ttf') format('truetype'), 37 | url('fonts/PTSansBoldItalic.svg') format('svg'); 38 | font-weight: bold; 39 | font-style: italic; 40 | } -------------------------------------------------------------------------------- /06/fonts/PTSansBold.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/06/fonts/PTSansBold.eot -------------------------------------------------------------------------------- /06/fonts/PTSansBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/06/fonts/PTSansBold.ttf -------------------------------------------------------------------------------- /06/fonts/PTSansBold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/06/fonts/PTSansBold.woff -------------------------------------------------------------------------------- /06/fonts/PTSansBoldItalic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/06/fonts/PTSansBoldItalic.eot -------------------------------------------------------------------------------- /06/fonts/PTSansBoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/06/fonts/PTSansBoldItalic.ttf -------------------------------------------------------------------------------- /06/fonts/PTSansBoldItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/06/fonts/PTSansBoldItalic.woff -------------------------------------------------------------------------------- /06/fonts/PTSansItalic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/06/fonts/PTSansItalic.eot -------------------------------------------------------------------------------- /06/fonts/PTSansItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/06/fonts/PTSansItalic.ttf -------------------------------------------------------------------------------- /06/fonts/PTSansItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/06/fonts/PTSansItalic.woff -------------------------------------------------------------------------------- /06/fonts/PTSansRegular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/06/fonts/PTSansRegular.eot -------------------------------------------------------------------------------- /06/fonts/PTSansRegular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/06/fonts/PTSansRegular.ttf -------------------------------------------------------------------------------- /06/fonts/PTSansRegular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/06/fonts/PTSansRegular.woff -------------------------------------------------------------------------------- /06/images/bg_banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/06/images/bg_banner.jpg -------------------------------------------------------------------------------- /06/images/bg_body.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/06/images/bg_body.png -------------------------------------------------------------------------------- /06/reset.css: -------------------------------------------------------------------------------- 1 | /* reset browser styles */ 2 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 3 | table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 4 | figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, 5 | time, mark, audio, video { 6 | margin: 0; 7 | padding: 0; 8 | border: 0; 9 | font-size: 100%; 10 | vertical-align: baseline; 11 | } 12 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 13 | display: block; 14 | } 15 | body { 16 | line-height: 1.2; 17 | } 18 | ol { 19 | padding-left: 1.4em; 20 | list-style: decimal; 21 | } 22 | ul { 23 | padding-left: 1.4em; 24 | list-style: square; 25 | } 26 | table { 27 | border-collapse: collapse; 28 | border-spacing: 0; 29 | } 30 | /* end reset browser styles */ -------------------------------------------------------------------------------- /06/text.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS Typography 6 | 7 | 8 | 9 | 10 |
11 |

CSS The Missing Manual

12 |

Exploring Typographic Possibilities

13 |

november 30 Rod Dibble

14 | 22 |

Esse quam nulla

23 |

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

24 |

Quis autem vel eum

25 |

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /06_finished/at-font-face.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'PTSans'; 3 | src: url('fonts/PTSansRegular.eot'); 4 | src: url('fonts/PTSansRegular.eot?#iefix') format('embedded-opentype'), 5 | url('fonts/PTSansRegular.woff') format('woff'), 6 | url('fonts/PTSansRegular.ttf') format('truetype'), 7 | url('fonts/PTSansRegular.svg') format('svg'); 8 | font-weight: normal; 9 | font-style: normal; 10 | } 11 | @font-face { 12 | font-family: 'PTSans'; 13 | src: url('fonts/PTSansItalic.eot'); 14 | src: url('fonts/PTSansItalic.eot?#iefix') format('embedded-opentype'), 15 | url('fonts/PTSansItalic.woff') format('woff'), 16 | url('fonts/PTSansItalic.ttf') format('truetype'), 17 | url('fonts/PTSansItalic.svg') format('svg'); 18 | font-weight: normal; 19 | font-style: italic; 20 | } 21 | @font-face { 22 | font-family: 'PTSans'; 23 | src: url('fonts/PTSansBold.eot'); 24 | src: url('fonts/PTSansBold.eot?#iefix') format('embedded-opentype'), 25 | url('fonts/PTSansBold.woff') format('woff'), 26 | url('fonts/PTSansBold.ttf') format('truetype'), 27 | url('fonts/PTSansBold.svg') format('svg'); 28 | font-weight: bold; 29 | font-style: normal; 30 | } 31 | @font-face { 32 | font-family: 'PTSans'; 33 | src: url('fonts/PTSansBoldItalic.eot'); 34 | src: url('fonts/PTSansBoldItalic.eot?#iefix') format('embedded-opentype'), 35 | url('fonts/PTSansBoldItalic.woff') format('woff'), 36 | url('fonts/PTSansBoldItalic.ttf') format('truetype'), 37 | url('fonts/PTSansBoldItalic.svg') format('svg'); 38 | font-weight: bold; 39 | font-style: italic; 40 | } -------------------------------------------------------------------------------- /06_finished/fonts/PTSansBold.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/06_finished/fonts/PTSansBold.eot -------------------------------------------------------------------------------- /06_finished/fonts/PTSansBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/06_finished/fonts/PTSansBold.ttf -------------------------------------------------------------------------------- /06_finished/fonts/PTSansBold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/06_finished/fonts/PTSansBold.woff -------------------------------------------------------------------------------- /06_finished/fonts/PTSansBoldItalic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/06_finished/fonts/PTSansBoldItalic.eot -------------------------------------------------------------------------------- /06_finished/fonts/PTSansBoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/06_finished/fonts/PTSansBoldItalic.ttf -------------------------------------------------------------------------------- /06_finished/fonts/PTSansBoldItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/06_finished/fonts/PTSansBoldItalic.woff -------------------------------------------------------------------------------- /06_finished/fonts/PTSansItalic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/06_finished/fonts/PTSansItalic.eot -------------------------------------------------------------------------------- /06_finished/fonts/PTSansItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/06_finished/fonts/PTSansItalic.ttf -------------------------------------------------------------------------------- /06_finished/fonts/PTSansItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/06_finished/fonts/PTSansItalic.woff -------------------------------------------------------------------------------- /06_finished/fonts/PTSansRegular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/06_finished/fonts/PTSansRegular.eot -------------------------------------------------------------------------------- /06_finished/fonts/PTSansRegular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/06_finished/fonts/PTSansRegular.ttf -------------------------------------------------------------------------------- /06_finished/fonts/PTSansRegular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/06_finished/fonts/PTSansRegular.woff -------------------------------------------------------------------------------- /06_finished/images/bg_banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/06_finished/images/bg_banner.jpg -------------------------------------------------------------------------------- /06_finished/images/bg_body.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/06_finished/images/bg_body.png -------------------------------------------------------------------------------- /06_finished/reset.css: -------------------------------------------------------------------------------- 1 | /* reset browser styles */ 2 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 3 | table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 4 | figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, 5 | time, mark, audio, video { 6 | margin: 0; 7 | padding: 0; 8 | border: 0; 9 | font-size: 100%; 10 | vertical-align: baseline; 11 | } 12 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 13 | display: block; 14 | } 15 | body { 16 | line-height: 1.2; 17 | } 18 | ol { 19 | padding-left: 1.4em; 20 | list-style: decimal; 21 | } 22 | ul { 23 | padding-left: 1.4em; 24 | list-style: square; 25 | } 26 | table { 27 | border-collapse: collapse; 28 | border-spacing: 0; 29 | } 30 | /* end reset browser styles */ -------------------------------------------------------------------------------- /07/images/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/07/images/banner.png -------------------------------------------------------------------------------- /07/images/bg_page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/07/images/bg_page.png -------------------------------------------------------------------------------- /07/sidebar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Margins, Padding, Borders, and Backgrounds 6 | 39 | 40 | 41 | 42 | 44 | 45 |

The Amazing World of CSS

46 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

47 |

NOTE

48 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est.

49 |

Who Knew CSS Had Such Power?

50 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores.

51 |

Not Me!

52 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

53 |

Me Neither!

54 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.

55 |

Copyright 2010, The Lorem Ipsum Corporation

56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /07_finished/images/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/07_finished/images/banner.png -------------------------------------------------------------------------------- /07_finished/images/bg_page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/07_finished/images/bg_page.png -------------------------------------------------------------------------------- /08/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/08/.DS_Store -------------------------------------------------------------------------------- /08/01_image_ex/image.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Image 6 | 7 | 10 | 11 | 12 | 13 |
14 |

CosmoFarmer’s Guide to Apartment Lawn Maintenance

15 | Apartment Grass 16 |

17 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tatio. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure.

18 |

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

19 |

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure.

20 |

Copyright 2012, CosmoFarmer.com

21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /08/01_image_ex/styles.css: -------------------------------------------------------------------------------- 1 | /* reset browser styles */ 2 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 3 | table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 4 | figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, 5 | time, mark, audio, video { 6 | margin: 0; 7 | padding: 0; 8 | border: 0; 9 | font-size: 100%; 10 | vertical-align: baseline; 11 | } 12 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 13 | display: block; 14 | } 15 | body { 16 | line-height: 1.2; 17 | } 18 | ol { 19 | padding-left: 1.4em; 20 | list-style: decimal; 21 | } 22 | ul { 23 | padding-left: 1.4em; 24 | list-style: square; 25 | } 26 | table { 27 | border-collapse: collapse; 28 | border-spacing: 0; 29 | } 30 | /* end reset browser styles */ 31 | 32 | body { 33 | font-size: 62.5%; 34 | } 35 | 36 | .content { 37 | margin: 15px; 38 | border: 1px dashed #999; 39 | border-bottom: none; 40 | } 41 | h1 { 42 | font: normal 2.4em Verdana, Arial, Helvetica, sans-serif; 43 | border-bottom: 1px dashed #999; 44 | padding: 5px 0 5px 8px; 45 | color: #14556b; 46 | } 47 | p { 48 | font: 1.6em/160% Georgia, "Times New Roman", Times, serif; 49 | margin: 10px 8px; 50 | } 51 | .copyright { 52 | font-family: Verdana, Arial, Helvetica, sans-serif; 53 | font-size: 1em; 54 | text-transform: uppercase; 55 | color: #666666; 56 | margin-left: 0px; 57 | padding-left: 8px; 58 | border-top: 1px dashed #999; 59 | clear: both; 60 | } 61 | -------------------------------------------------------------------------------- /08/02_gallery_ex/gallery.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CosmoFarmer Gallery 6 | 7 | 10 | 11 | 12 |
13 |

CosmoFarmer.com’s Indoor Grass Photo Gallery

14 |

A selection of indoor sod options: reviewed and tested by CosmoFarmer.com in our state-of-the-art “Apartment Laboratory” on 5th Avenue.

15 |
16 |
17 | Carpet Grass 18 |
Figure 1: Even the carpet-like Carpetorium Pratensis requires mowing.
19 |
20 |
21 | Bentgrass 22 |
Figure 2: Creeping Bentgrass is best suited for outdoor use and should be avoided by the indoor farmer.
23 |
24 |
25 | Bluegrass 26 |
Figure 3: This indoor-hybrid of Kentucky Bluegrass has fallen out of fashion.
27 |
28 |
29 | Leaves 30 |
Figure 4: Tinea Pedis Poaceae threatens discomfort to bare feet.
31 |
32 |
33 | Pattern Grass 34 |
Figure 5: The difficult to maintain pattern of this indoor lawn is a sight to behold.
35 |
36 |
37 | Dandelion 38 |
Figure 6: The dandelion: scourge of the apartment farmer.
39 |
40 |
41 |

Copyright 2012, CosmoFarmer.com

42 |
43 | 44 | 45 | -------------------------------------------------------------------------------- /08/02_gallery_ex/styles.css: -------------------------------------------------------------------------------- 1 | /* reset browser styles */ 2 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 3 | table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 4 | figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, 5 | time, mark, audio, video { 6 | margin: 0; 7 | padding: 0; 8 | border: 0; 9 | font-size: 100%; 10 | vertical-align: baseline; 11 | } 12 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 13 | display: block; 14 | } 15 | body { 16 | line-height: 1.2; 17 | } 18 | ol { 19 | padding-left: 1.4em; 20 | list-style: decimal; 21 | } 22 | ul { 23 | padding-left: 1.4em; 24 | list-style: square; 25 | } 26 | table { 27 | border-collapse: collapse; 28 | border-spacing: 0; 29 | } 30 | /* end reset browser styles */ 31 | 32 | body { 33 | font-size: 62.5%; 34 | } 35 | .content { 36 | margin-left: 15px; 37 | margin-top: 15px; 38 | border: 1px dashed #999; 39 | border-right: none; 40 | border-bottom: none; 41 | } 42 | p.caption { 43 | font-size: 1.3em; 44 | line-height: normal; 45 | margin-bottom: 15px; 46 | } 47 | .gallery .figure p { 48 | font-family: Arial, Helvetica, sans-serif; 49 | font-size: 1.1em; 50 | text-align: center; 51 | line-height: normal; 52 | } 53 | 54 | 55 | h1 { 56 | font: normal 2.4em Verdana, Arial, Helvetica, sans-serif; 57 | margin: 0; 58 | border-bottom: 1px dashed #999; 59 | padding: 5px 0 5px 8px; 60 | color: #14556b; 61 | } 62 | p { 63 | font: 1.6em/160% Georgia, "Times New Roman", Times, serif; 64 | margin: 10px 8px; 65 | } 66 | .copyright { 67 | font-family: Verdana, Arial, Helvetica, sans-serif; 68 | font-size: 1em; 69 | text-transform: uppercase; 70 | color: #666666; 71 | margin-left: 0px; 72 | padding-left: 8px; 73 | border-top: 1px dashed #999; 74 | clear: both; 75 | } 76 | -------------------------------------------------------------------------------- /08/03_bg_ex/bg_images.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Background Images 6 | 7 | 10 | 11 | 12 |
13 | 16 |
17 |

Lorem Ipsum Dolor Sat

18 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

19 |

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?

20 |

Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

21 |

Nisi Ut Aliquid

22 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

23 |

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

24 |
25 |
26 |

Announcements

27 | 36 |
37 |
38 |

Copyright 2010, Lorem Ipsum Corporation

39 |
40 |
41 | 42 | 43 | -------------------------------------------------------------------------------- /08/03_bg_ex/images/bg_main.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/08/03_bg_ex/images/bg_main.jpg -------------------------------------------------------------------------------- /08/03_bg_ex/images/bg_page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/08/03_bg_ex/images/bg_page.png -------------------------------------------------------------------------------- /08/03_bg_ex/images/bullet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/08/03_bg_ex/images/bullet.png -------------------------------------------------------------------------------- /08/03_bg_ex/images/scroll_bottom.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/08/03_bg_ex/images/scroll_bottom.jpg -------------------------------------------------------------------------------- /08/03_bg_ex/images/scroll_middle.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/08/03_bg_ex/images/scroll_middle.jpg -------------------------------------------------------------------------------- /08/03_bg_ex/images/scroll_top.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/08/03_bg_ex/images/scroll_top.jpg -------------------------------------------------------------------------------- /08/03_bg_ex/images/underline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/08/03_bg_ex/images/underline.png -------------------------------------------------------------------------------- /08/03_bg_ex/styles.css: -------------------------------------------------------------------------------- 1 | /* reset browser styles */ 2 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 3 | table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 4 | figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, 5 | time, mark, audio, video { 6 | margin: 0; 7 | padding: 0; 8 | border: 0; 9 | font-size: 100%; 10 | vertical-align: baseline; 11 | } 12 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 13 | display: block; 14 | } 15 | body { 16 | line-height: 1.2; 17 | } 18 | ol { 19 | padding-left: 1.4em; 20 | list-style: decimal; 21 | } 22 | ul { 23 | padding-left: 1.4em; 24 | list-style: square; 25 | } 26 | table { 27 | border-collapse: collapse; 28 | border-spacing: 0; 29 | } 30 | /* end reset browser styles */ 31 | 32 | .wrapper { 33 | width: 960px; 34 | margin-right: auto; 35 | margin-left: auto; 36 | overflow: hidden; /* contain float */ 37 | } 38 | 39 | .main { 40 | float: right; 41 | width: 565px; 42 | margin-right: 15px; 43 | padding-top: 25px; 44 | } 45 | 46 | .announcement { 47 | margin-right: 600px; 48 | margin-left: 20px; 49 | 50 | } 51 | 52 | .copyright { 53 | clear: both; 54 | font: bold 12px Tahoma, Geneva, sans-serif; 55 | color: #65747E; 56 | padding: 5px; 57 | margin: 0 15px; 58 | border: 1px dotted #98AFBE; 59 | border-left: none; 60 | border-right: none; 61 | } 62 | 63 | 64 | .banner h1 { 65 | font: normal 48px Georgia, "Times New Roman", Times, serif; 66 | text-align: right; 67 | color: #272D32; 68 | } 69 | 70 | .main h2 { 71 | font: 24px Tahoma, Geneva, sans-serif; 72 | margin-bottom: 15px; 73 | font-family: Tahoma, Geneva, sans-serif; 74 | } 75 | .main p { 76 | font: 14px Tahoma, Geneva, sans-serif; 77 | color: #323A3F; 78 | margin-bottom: 20px; 79 | font-family: Tahoma, Geneva, sans-serif; 80 | } 81 | 82 | .announcement h2 { 83 | font: italic bold normal 20px Georgia, "Times New Roman", Times, serif; 84 | text-align: center; 85 | color: #323A3F; 86 | text-transform: uppercase; 87 | letter-spacing: 1px; 88 | margin-bottom: 18px; 89 | } 90 | .announcement ul { 91 | font: 14px Tahoma, Geneva, sans-serif; 92 | } 93 | 94 | -------------------------------------------------------------------------------- /08/html5shiv.js: -------------------------------------------------------------------------------- 1 | /* 2 | HTML5 Shiv v3.6.2pre | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed 3 | */ 4 | (function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag(); 5 | a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/\w+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x"; 6 | c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode|| 7 | "undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",version:"3.6.2pre",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);if(g)return a.createDocumentFragment(); 8 | for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d 2 | 3 | 4 | 5 | Image 6 | 7 | 10 | 11 | 12 |
13 |

CosmoFarmer’s Guide to Apartment Lawn Maintenance

14 |
15 | Apartment Grass 16 |
Figure 1: Creeping Bentgrass is best suited for outdoor use and should be avoided by the indoor farmer. 17 |
18 |
19 |

20 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tatio. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure.

21 |

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

22 |

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure.

23 |

Copyright 2012, CosmoFarmer.com

24 |
25 | 26 | 27 | -------------------------------------------------------------------------------- /08_finished/01_image_ex/styles.css: -------------------------------------------------------------------------------- 1 | /* reset browser styles */ 2 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 3 | table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 4 | figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, 5 | time, mark, audio, video { 6 | margin: 0; 7 | padding: 0; 8 | border: 0; 9 | font-size: 100%; 10 | vertical-align: baseline; 11 | } 12 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 13 | display: block; 14 | } 15 | body { 16 | line-height: 1.2; 17 | } 18 | ol { 19 | padding-left: 1.4em; 20 | list-style: decimal; 21 | } 22 | ul { 23 | padding-left: 1.4em; 24 | list-style: square; 25 | } 26 | table { 27 | border-collapse: collapse; 28 | border-spacing: 0; 29 | } 30 | /* end reset browser styles */ 31 | 32 | body { 33 | font-size: 62.5%; 34 | } 35 | 36 | .content { 37 | margin: 15px; 38 | border: 1px dashed #999; 39 | border-bottom: none; 40 | } 41 | h1 { 42 | font: normal 2.4em Verdana, Arial, Helvetica, sans-serif; 43 | border-bottom: 1px dashed #999; 44 | padding: 5px 0 5px 8px; 45 | color: #14556b; 46 | } 47 | p { 48 | font: 1.6em/160% Georgia, "Times New Roman", Times, serif; 49 | margin: 10px 8px; 50 | } 51 | .copyright { 52 | font-family: Verdana, Arial, Helvetica, sans-serif; 53 | font-size: 1em; 54 | text-transform: uppercase; 55 | color: #666666; 56 | margin-left: 0px; 57 | padding-left: 8px; 58 | border-top: 1px dashed #999; 59 | clear: both; 60 | } 61 | figure { 62 | float: right; 63 | width: 222px; 64 | margin: 15px 10px 5px 10px; 65 | } 66 | figure img { 67 | border: 1px solid #666; 68 | background-color: #CCC; 69 | padding: 10px; 70 | } 71 | figcaption { 72 | font: bold 1em/normal Verdana, Arial, Helvetica, sans-serif; 73 | color: #333; 74 | text-align: center; 75 | background-color: #e6f3ff; 76 | border: 1px dashed #666; 77 | padding: 5px; 78 | } 79 | -------------------------------------------------------------------------------- /08_finished/02_gallery_ex/gallery.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CosmoFarmer Gallery 6 | 7 | 28 | 29 | 32 | 33 | 34 |
35 |

CosmoFarmer.com’s Indoor Grass Photo Gallery

36 |

A selection of indoor sod options: reviewed and tested by CosmoFarmer.com in our state-of-the-art “Apartment Laboratory” on 5th Avenue.

37 |
38 |
39 | Carpet Grass 40 |
Figure 1: Even the carpet-like Carpetorium Pratensis requires mowing.
41 |
42 |
43 | Bentgrass 44 |
Figure 2: Creeping Bentgrass is best suited for outdoor use and should be avoided by the indoor farmer.
45 |
46 |
47 | Bluegrass 48 |
Figure 3: This indoor-hybrid of Kentucky Bluegrass has fallen out of fashion.
49 |
50 |
51 | Leaves 52 |
Figure 4: Tinea Pedis Poaceae threatens discomfort to bare feet.
53 |
54 |
55 | Pattern Grass 56 |
Figure 5: The difficult to maintain pattern of this indoor lawn is a sight to behold.
57 |
58 |
59 | Dandelion 60 |
Figure 6: The dandelion: scourge of the apartment farmer.
61 |
62 |
63 |

Copyright 2012, CosmoFarmer.com

64 |
65 | 66 | 67 | -------------------------------------------------------------------------------- /08_finished/02_gallery_ex/styles.css: -------------------------------------------------------------------------------- 1 | /* reset browser styles */ 2 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 3 | table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 4 | figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, 5 | time, mark, audio, video { 6 | margin: 0; 7 | padding: 0; 8 | border: 0; 9 | font-size: 100%; 10 | vertical-align: baseline; 11 | } 12 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 13 | display: block; 14 | } 15 | body { 16 | line-height: 1.2; 17 | } 18 | ol { 19 | padding-left: 1.4em; 20 | list-style: decimal; 21 | } 22 | ul { 23 | padding-left: 1.4em; 24 | list-style: square; 25 | } 26 | table { 27 | border-collapse: collapse; 28 | border-spacing: 0; 29 | } 30 | /* end reset browser styles */ 31 | 32 | body { 33 | font-size: 62.5%; 34 | } 35 | .content { 36 | margin-left: 15px; 37 | margin-top: 15px; 38 | border: 1px dashed #999; 39 | border-right: none; 40 | border-bottom: none; 41 | } 42 | 43 | h1 { 44 | font: normal 2.4em Verdana, Arial, Helvetica, sans-serif; 45 | margin: 0; 46 | border-bottom: 1px dashed #999; 47 | padding: 5px 0 5px 8px; 48 | color: #14556b; 49 | } 50 | p { 51 | font: 1.6em/160% Georgia, "Times New Roman", Times, serif; 52 | margin: 10px 8px; 53 | } 54 | .copyright { 55 | font-family: Verdana, Arial, Helvetica, sans-serif; 56 | font-size: 1em; 57 | text-transform: uppercase; 58 | color: #666666; 59 | margin-left: 0px; 60 | padding-left: 8px; 61 | border-top: 1px dashed #999; 62 | clear: both; 63 | } 64 | -------------------------------------------------------------------------------- /08_finished/03_bg_ex/bg_images.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Background Images 6 | 7 | 48 | 49 | 50 |
51 | 54 |
55 |

Lorem Ipsum Dolor Sat

56 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

57 |

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?

58 |

Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

59 |

Nisi Ut Aliquid

60 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

61 |

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

62 |
63 |
64 |

Announcements

65 |
    66 |
  • Lorem Ipsum Dolor Sat
    • 67 |
  • Quis nostrum exercitationem ullam
    • 68 |
  • Eius modi tempora incidunt
    • 69 |
  • Quis autem vel eum iure reprehenderit
    • 70 |
  • Sed quia non numquam eius modi tempora incidu
    • 71 |
  • Nemo enim ipsam voluptate
    • 72 | 73 |
74 |
75 |
76 |

Copyright 2010, Lorem Ipsum Corporation

77 |
78 |
79 | 80 | 81 | -------------------------------------------------------------------------------- /08_finished/03_bg_ex/bg_images_ie8.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Background Images 7 | 8 | 52 | 53 | 54 |
55 | 58 |
59 |

Lorem Ipsum Dolor Sat

60 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

61 |

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?

62 |

Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

63 |

Nisi Ut Aliquid

64 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

65 |

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

66 |
67 |
68 |

Announcements

69 |
    70 |
  • Lorem Ipsum Dolor Sat
    • 71 |
  • Quis nostrum exercitationem ullam
    • 72 |
  • Eius modi tempora incidunt
    • 73 |
  • Quis autem vel eum iure reprehenderit
    • 74 |
  • Sed quia non numquam eius modi tempora incidu
    • 75 |
  • Nemo enim ipsam voluptate
    • 76 |
77 |
78 |
79 |

Copyright 2010, Lorem Ipsum Corporation

80 |
81 |
82 | 83 | 84 | -------------------------------------------------------------------------------- /08_finished/03_bg_ex/images/bg_main.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/08_finished/03_bg_ex/images/bg_main.jpg -------------------------------------------------------------------------------- /08_finished/03_bg_ex/images/bg_page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/08_finished/03_bg_ex/images/bg_page.png -------------------------------------------------------------------------------- /08_finished/03_bg_ex/images/bullet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/08_finished/03_bg_ex/images/bullet.png -------------------------------------------------------------------------------- /08_finished/03_bg_ex/images/scroll_bottom.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/08_finished/03_bg_ex/images/scroll_bottom.jpg -------------------------------------------------------------------------------- /08_finished/03_bg_ex/images/scroll_middle.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/08_finished/03_bg_ex/images/scroll_middle.jpg -------------------------------------------------------------------------------- /08_finished/03_bg_ex/images/scroll_top.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/08_finished/03_bg_ex/images/scroll_top.jpg -------------------------------------------------------------------------------- /08_finished/03_bg_ex/images/underline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/08_finished/03_bg_ex/images/underline.png -------------------------------------------------------------------------------- /08_finished/03_bg_ex/styles.css: -------------------------------------------------------------------------------- 1 | /* reset browser styles */ 2 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 3 | table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 4 | figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, 5 | time, mark, audio, video { 6 | margin: 0; 7 | padding: 0; 8 | border: 0; 9 | font-size: 100%; 10 | vertical-align: baseline; 11 | } 12 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 13 | display: block; 14 | } 15 | body { 16 | line-height: 1.2; 17 | } 18 | ol { 19 | padding-left: 1.4em; 20 | list-style: decimal; 21 | } 22 | ul { 23 | padding-left: 1.4em; 24 | list-style: square; 25 | } 26 | table { 27 | border-collapse: collapse; 28 | border-spacing: 0; 29 | } 30 | /* end reset browser styles */ 31 | 32 | .wrapper { 33 | width: 960px; 34 | margin-right: auto; 35 | margin-left: auto; 36 | overflow: hidden; /* contain float */ 37 | } 38 | 39 | .main { 40 | float: right; 41 | width: 565px; 42 | margin-right: 15px; 43 | padding-top: 25px; 44 | } 45 | 46 | .announcement { 47 | margin-right: 600px; 48 | margin-left: 20px; 49 | 50 | } 51 | 52 | .copyright { 53 | clear: both; 54 | font: bold 12px Tahoma, Geneva, sans-serif; 55 | color: #65747E; 56 | padding: 5px; 57 | margin: 0 15px; 58 | border: 1px dotted #98AFBE; 59 | border-left: none; 60 | border-right: none; 61 | } 62 | 63 | 64 | .banner h1 { 65 | font: normal 48px Georgia, "Times New Roman", Times, serif; 66 | text-align: right; 67 | color: #272D32; 68 | } 69 | 70 | .main h2 { 71 | font: 24px Tahoma, Geneva, sans-serif; 72 | margin-bottom: 15px; 73 | font-family: Tahoma, Geneva, sans-serif; 74 | } 75 | .main p { 76 | font: 14px Tahoma, Geneva, sans-serif; 77 | color: #323A3F; 78 | margin-bottom: 20px; 79 | font-family: Tahoma, Geneva, sans-serif; 80 | } 81 | 82 | .announcement h2 { 83 | font: italic bold normal 20px Georgia, "Times New Roman", Times, serif; 84 | text-align: center; 85 | color: #323A3F; 86 | text-transform: uppercase; 87 | letter-spacing: 1px; 88 | margin-bottom: 18px; 89 | } 90 | .announcement ul { 91 | font: 14px Tahoma, Geneva, sans-serif; 92 | } 93 | 94 | -------------------------------------------------------------------------------- /08_finished/html5shiv.js: -------------------------------------------------------------------------------- 1 | /* 2 | HTML5 Shiv v3.6.2pre | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed 3 | */ 4 | (function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag(); 5 | a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/\w+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x"; 6 | c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode|| 7 | "undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",version:"3.6.2pre",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);if(g)return a.createDocumentFragment(); 8 | for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d 2 | 3 | 4 | 5 | CSS Typography 6 | 7 | 11 | 12 | 13 | 14 |
15 |

CSS The Missing Manual

16 |

Exploring Typographic Possibilities

17 |

november 30 Rod Dibble

18 |
19 |

Resources

20 | 27 |
28 |

Esse quam nulla

29 |

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

30 |

Quis autem vel eum

31 |

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illu qui dolorem eum fugiat quo voluptas nulla pariatur? Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

32 |

Copyright 2010. E-mail comments to css@cosmofarmer.com

33 |
34 | 35 | 36 | -------------------------------------------------------------------------------- /09/links/main.css: -------------------------------------------------------------------------------- 1 | /* reset browser styles */ 2 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 3 | table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 4 | figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, 5 | time, mark, audio, video { 6 | margin: 0; 7 | padding: 0; 8 | border: 0; 9 | font-size: 100%; 10 | vertical-align: baseline; 11 | } 12 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 13 | display: block; 14 | } 15 | body { 16 | line-height: 1.2; 17 | } 18 | ol { 19 | padding-left: 1.4em; 20 | list-style: decimal; 21 | } 22 | ul { 23 | padding-left: 1.4em; 24 | list-style: square; 25 | } 26 | table { 27 | border-collapse: collapse; 28 | border-spacing: 0; 29 | } 30 | /* end reset browser styles */ 31 | 32 | body { 33 | font-size: 62.5%; 34 | font-family: Arial, Helvetica, sans-serif; 35 | color: #002D4B; 36 | background: #E1EEFD url(images/bg_body.png) repeat-x; 37 | } 38 | 39 | .main { 40 | width: 740px; 41 | margin: 0 auto; 42 | padding: 0 10px; 43 | border: 4px solid white; 44 | background: transparent url(images/bg_banner.jpg) no-repeat; 45 | } 46 | 47 | .main h1 { 48 | color: #FF6600; 49 | font-family: "Arial Black", Arial, Helvetica, sans-serif; 50 | font-size: 4em; 51 | } 52 | 53 | .main h1 strong { 54 | font-size: 150px; 55 | color: white; 56 | line-height: 1em; 57 | margin-right: -1.25em; 58 | } 59 | 60 | 61 | .main h2 { 62 | font: bold 3.5em "Hoefler Text", Garamond, Times, serif; 63 | border-bottom: 1px solid #002D4B; 64 | margin-top: 25px; 65 | } 66 | 67 | .main h3 { 68 | color: #F60; 69 | font-size: 1.9em; 70 | font-weight: bold; 71 | text-transform: uppercase; 72 | margin-top: 25px; 73 | margin-bottom: 10px; 74 | } 75 | 76 | .main p { 77 | font-size: 1.5em; 78 | line-height: 150%; 79 | margin-bottom: 10px; 80 | margin-left: 150px; 81 | margin-right: 50px; 82 | } 83 | 84 | .main p:first-line { 85 | font-weight: bold; 86 | color: #999; 87 | } 88 | 89 | 90 | .resources { 91 | margin: 0 0 25px 50px; 92 | width: 225px; 93 | float: right; 94 | padding: 20px; 95 | background: #F5EFFB; 96 | } 97 | 98 | .resources h3 { 99 | margin-top: 0; 100 | color: #002D4B; 101 | } 102 | 103 | .resources li { 104 | font-size: 1.5em; 105 | margin-bottom: 7px; 106 | color: #207EBF; 107 | } 108 | 109 | .main .byline { 110 | color: #999999; 111 | font-size: 1.6em; 112 | margin: 5px 0 25px 40px; 113 | } 114 | 115 | .main .byline strong { 116 | color: #207EBF; 117 | text-transform: uppercase; 118 | margin-left: 11px; 119 | } 120 | .main .legal{ 121 | margin-top: 15px; 122 | padding-top: 5px; 123 | border-top: 1px solid #FFF; 124 | margin-left: 0px; 125 | padding-left: 150px; 126 | } 127 | -------------------------------------------------------------------------------- /09/links/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS Typography 6 | 17 | 18 | 19 | 20 | 21 |
22 |

CSS The Missing Manual

23 |

This is just a test (click here to go back)

24 |

 

25 |

Copyright 2010. E-mail comments to css@cosmofarmer.com

26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /09/links/test2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS Typography 6 | 17 | 18 | 19 | 20 | 21 |
22 |

CSS The Missing Manual

23 |

This is just a test (click here to go back)

24 |

 

25 |

Copyright 2010. E-mail comments to css@cosmofarmer.com

26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /09/links/test3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS Typography 6 | 17 | 18 | 19 | 20 | 21 |
22 |

CSS The Missing Manual

23 |

This is just a test (click here to go back)

24 |

 

25 |

Copyright 2010. E-mail comments to css@cosmofarmer.com

26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /09/nav_bar/images/home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/09/nav_bar/images/home.png -------------------------------------------------------------------------------- /09/nav_bar/images/nav.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/09/nav_bar/images/nav.png -------------------------------------------------------------------------------- /09/nav_bar/nav_bar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CosmoFarmer 6 | 47 | 48 | 49 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /09_finished/links/images/acrobat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/09_finished/links/images/acrobat.png -------------------------------------------------------------------------------- /09_finished/links/images/bg_banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/09_finished/links/images/bg_banner.jpg -------------------------------------------------------------------------------- /09_finished/links/images/bg_body.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/09_finished/links/images/bg_body.png -------------------------------------------------------------------------------- /09_finished/links/images/check.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/09_finished/links/images/check.gif -------------------------------------------------------------------------------- /09_finished/links/images/email.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/09_finished/links/images/email.gif -------------------------------------------------------------------------------- /09_finished/links/images/globe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/09_finished/links/images/globe.png -------------------------------------------------------------------------------- /09_finished/links/images/word.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/09_finished/links/images/word.png -------------------------------------------------------------------------------- /09_finished/links/images/zip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/09_finished/links/images/zip.png -------------------------------------------------------------------------------- /09_finished/links/links.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS Typography 6 | 7 | 53 | 54 | 55 | 56 | 57 |
58 |

CSS The Missing Manual

59 |

Exploring Typographic Possibilities

60 |

november 30 Rod Dibble

61 |
62 |

Resources

63 | 70 |
71 |

Esse quam nulla

72 |

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

73 |

Quis autem vel eum

74 |

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illu qui dolorem eum fugiat quo voluptas nulla pariatur? Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

75 |

Copyright 2010. E-mail comments to css@cosmofarmer.com

76 |
77 | 78 | 79 | -------------------------------------------------------------------------------- /09_finished/links/main.css: -------------------------------------------------------------------------------- 1 | /* reset browser styles */ 2 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 3 | table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 4 | figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, 5 | time, mark, audio, video { 6 | margin: 0; 7 | padding: 0; 8 | border: 0; 9 | font-size: 100%; 10 | vertical-align: baseline; 11 | } 12 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 13 | display: block; 14 | } 15 | body { 16 | line-height: 1.2; 17 | } 18 | ol { 19 | padding-left: 1.4em; 20 | list-style: decimal; 21 | } 22 | ul { 23 | padding-left: 1.4em; 24 | list-style: square; 25 | } 26 | table { 27 | border-collapse: collapse; 28 | border-spacing: 0; 29 | } 30 | /* end reset browser styles */ 31 | 32 | body { 33 | font-size: 62.5%; 34 | font-family: Arial, Helvetica, sans-serif; 35 | color: #002D4B; 36 | background: #E1EEFD url(images/bg_body.png) repeat-x; 37 | } 38 | 39 | .main { 40 | width: 740px; 41 | margin: 0 auto; 42 | padding: 0 10px; 43 | border: 4px solid white; 44 | background: transparent url(images/bg_banner.jpg) no-repeat; 45 | } 46 | 47 | .main h1 { 48 | color: #FF6600; 49 | font-family: "Arial Black", Arial, Helvetica, sans-serif; 50 | font-size: 4em; 51 | } 52 | 53 | .main h1 strong { 54 | font-size: 150px; 55 | color: white; 56 | line-height: 1em; 57 | margin-right: -1.25em; 58 | } 59 | 60 | 61 | .main h2 { 62 | font: bold 3.5em "Hoefler Text", Garamond, Times, serif; 63 | border-bottom: 1px solid #002D4B; 64 | margin-top: 25px; 65 | } 66 | 67 | .main h3 { 68 | color: #F60; 69 | font-size: 1.9em; 70 | font-weight: bold; 71 | text-transform: uppercase; 72 | margin-top: 25px; 73 | margin-bottom: 10px; 74 | } 75 | 76 | .main p { 77 | font-size: 1.5em; 78 | line-height: 150%; 79 | margin-bottom: 10px; 80 | margin-left: 150px; 81 | margin-right: 50px; 82 | } 83 | 84 | .main p:first-line { 85 | font-weight: bold; 86 | color: #999; 87 | } 88 | 89 | 90 | .resources { 91 | margin: 0 0 25px 50px; 92 | width: 225px; 93 | float: right; 94 | padding: 20px; 95 | background: #F5EFFB; 96 | } 97 | 98 | .resources h3 { 99 | margin-top: 0; 100 | color: #002D4B; 101 | } 102 | 103 | .resources li { 104 | font-size: 1.5em; 105 | margin-bottom: 7px; 106 | color: #207EBF; 107 | } 108 | 109 | .main .byline { 110 | color: #999999; 111 | font-size: 1.6em; 112 | margin: 5px 0 25px 40px; 113 | } 114 | 115 | .main .byline strong { 116 | color: #207EBF; 117 | text-transform: uppercase; 118 | margin-left: 11px; 119 | } 120 | .main .legal{ 121 | margin-top: 15px; 122 | padding-top: 5px; 123 | border-top: 1px solid #FFF; 124 | margin-left: 0px; 125 | padding-left: 150px; 126 | } 127 | -------------------------------------------------------------------------------- /09_finished/links/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS Typography 6 | 17 | 18 | 19 | 20 | 21 |
22 |

CSS The Missing Manual

23 |

This is just a test (click here to go back)

24 |

 

25 |

Copyright 2010. E-mail comments to css@cosmofarmer.com

26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /09_finished/links/test2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS Typography 6 | 17 | 18 | 19 | 20 | 21 |
22 |

CSS The Missing Manual

23 |

This is just a test (click here to go back)

24 |

 

25 |

Copyright 2010. E-mail comments to css@cosmofarmer.com

26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /09_finished/links/test3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS Typography 6 | 17 | 18 | 19 | 20 | 21 |
22 |

CSS The Missing Manual

23 |

This is just a test (click here to go back)

24 |

 

25 |

Copyright 2010. E-mail comments to css@cosmofarmer.com

26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /09_finished/nav_bar/images/home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/09_finished/nav_bar/images/home.png -------------------------------------------------------------------------------- /09_finished/nav_bar/images/nav.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/09_finished/nav_bar/images/nav.png -------------------------------------------------------------------------------- /09_finished/nav_bar/nav_bar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CosmoFarmer 6 | 80 | 81 | 82 | 90 | 91 | 92 | -------------------------------------------------------------------------------- /09_finished/nav_bar/nav_bar_horizontal.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CosmoFarmer 6 | 91 | 92 | 93 | 101 | 102 | 103 | -------------------------------------------------------------------------------- /09_finished/nav_bar/nav_bar_vertical.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CosmoFarmer 6 | 80 | 81 | 82 | 90 | 91 | 92 | -------------------------------------------------------------------------------- /10/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/10/.DS_Store -------------------------------------------------------------------------------- /10/banner.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS3 Transforms, Transitions and Animations 6 | 7 | 10 | 13 | 14 | 15 |
16 |
17 | 18 |

CSS3 Transforms, Transitions and Animations

19 | 27 |
28 |
29 | 30 | 31 | -------------------------------------------------------------------------------- /10/html5shiv.js: -------------------------------------------------------------------------------- 1 | /* 2 | HTML5 Shiv v3.6.2pre | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed 3 | */ 4 | (function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag(); 5 | a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/\w+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x"; 6 | c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode|| 7 | "undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",version:"3.6.2pre",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);if(g)return a.createDocumentFragment(); 8 | for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d 2 | 3 | 4 | 5 | CSS3 Transforms, Transitions and Animations 6 | 7 | 84 | 87 | 88 | 89 |
90 |
91 | 92 |

CSS3 Transforms, Transitions and Animations

93 | 101 |
102 |
103 | 104 | 105 | -------------------------------------------------------------------------------- /10_finished/html5shiv.js: -------------------------------------------------------------------------------- 1 | /* 2 | HTML5 Shiv v3.6.2pre | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed 3 | */ 4 | (function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag(); 5 | a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/\w+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x"; 6 | c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode|| 7 | "undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",version:"3.6.2pre",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);if(g)return a.createDocumentFragment(); 8 | for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d 2 | 3 | 4 | 5 | Subscribe to CosmoFarmer.com 6 | 7 | 10 | 11 | 12 |

Reader Subscription Form

13 |
14 |

15 | 16 | 17 |

18 |

19 | 20 | 21 |

22 |

Rate your apartment farming skills 23 | 26 | 29 | 32 |

33 |

34 | 35 | 42 |

43 |

44 | 45 | 46 |

47 |

48 | 49 |

50 |
51 | 52 | -------------------------------------------------------------------------------- /11/form/global.css: -------------------------------------------------------------------------------- 1 | /* reset browser styles */ 2 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 3 | table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 4 | figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, 5 | time, mark, audio, video { 6 | margin: 0; 7 | padding: 0; 8 | font-size: 100%; 9 | vertical-align: baseline; 10 | } 11 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 12 | display: block; 13 | } 14 | body { 15 | line-height: 1.2; 16 | } 17 | ol { 18 | padding-left: 1.4em; 19 | list-style: decimal; 20 | } 21 | ul { 22 | padding-left: 1.4em; 23 | list-style: square; 24 | } 25 | 26 | /* end reset browser styles */ 27 | 28 | body { 29 | width: 760px; 30 | margin: 0 auto; 31 | background-color: rgb(0,51,102); 32 | color: rgb(255,255,255); 33 | } 34 | 35 | h1 { 36 | font-size: 2em; 37 | font-family: Tahoma, Geneva, sans-serif; 38 | font-weight: normal; 39 | border-bottom: dotted 2px rgba(255,255,255,.5); 40 | padding-bottom: 4px; 41 | margin: 25px 0; 42 | } 43 | 44 | p { 45 | margin-bottom: 25px; 46 | } -------------------------------------------------------------------------------- /11/table/css/main.css: -------------------------------------------------------------------------------- 1 | /* reset browser styles */ 2 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 3 | table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 4 | figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, 5 | time, mark, audio, video { 6 | margin: 0; 7 | padding: 0; 8 | font-size: 100%; 9 | vertical-align: baseline; 10 | } 11 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 12 | display: block; 13 | } 14 | body { 15 | line-height: 1.2; 16 | } 17 | ol { 18 | padding-left: 1.4em; 19 | list-style: decimal; 20 | } 21 | ul { 22 | padding-left: 1.4em; 23 | list-style: square; 24 | } 25 | 26 | /* end reset browser styles */ 27 | 28 | body { 29 | width: 760px; 30 | margin: 0 auto; 31 | background-color: #FDFCD2; 32 | } 33 | 34 | h1 { 35 | font: italic normal 3em Baskerville, "Palatino Linotype", "Times New Roman", serif; 36 | color: #46874D; 37 | background: url(../images/underline.png) no-repeat 0px 88%; 38 | padding-left: 2px; 39 | } 40 | -------------------------------------------------------------------------------- /11/table/images/star.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/11/table/images/star.png -------------------------------------------------------------------------------- /11/table/images/underline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/11/table/images/underline.png -------------------------------------------------------------------------------- /11_finished/form/form.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Subscribe to CosmoFarmer.com 6 | 7 | 57 | 58 | 59 |

Reader Subscription Form

60 |
61 |

62 | 63 | 64 |

65 |

66 | 67 | 68 |

69 |

Rate your apartment farming skills 70 | 73 | 76 | 79 |

80 |

81 | 82 | 89 |

90 |

91 | 92 | 93 |

94 |

95 | 96 |

97 |
98 | 99 | -------------------------------------------------------------------------------- /11_finished/form/global.css: -------------------------------------------------------------------------------- 1 | /* reset browser styles */ 2 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 3 | table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 4 | figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, 5 | time, mark, audio, video { 6 | margin: 0; 7 | padding: 0; 8 | font-size: 100%; 9 | vertical-align: baseline; 10 | } 11 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 12 | display: block; 13 | } 14 | body { 15 | line-height: 1.2; 16 | } 17 | ol { 18 | padding-left: 1.4em; 19 | list-style: decimal; 20 | } 21 | ul { 22 | padding-left: 1.4em; 23 | list-style: square; 24 | } 25 | 26 | /* end reset browser styles */ 27 | 28 | body { 29 | width: 760px; 30 | margin: 0 auto; 31 | background-color: rgb(0,51,102) 32 | } 33 | 34 | h1 { 35 | font-size: 2em; 36 | font-family: Tahoma, Geneva, sans-serif; 37 | color: rgb(255,255,255); 38 | font-weight: normal; 39 | border-bottom: dotted 2px rgba(255,255,255,.5); 40 | padding-bottom: 4px; 41 | margin: 25px 0; 42 | } 43 | 44 | p { 45 | margin-bottom: 25px; 46 | } -------------------------------------------------------------------------------- /11_finished/table/css/main.css: -------------------------------------------------------------------------------- 1 | /* reset browser styles */ 2 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 3 | table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 4 | figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, 5 | time, mark, audio, video { 6 | margin: 0; 7 | padding: 0; 8 | font-size: 100%; 9 | vertical-align: baseline; 10 | } 11 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 12 | display: block; 13 | } 14 | body { 15 | line-height: 1.2; 16 | } 17 | ol { 18 | padding-left: 1.4em; 19 | list-style: decimal; 20 | } 21 | ul { 22 | padding-left: 1.4em; 23 | list-style: square; 24 | } 25 | 26 | /* end reset browser styles */ 27 | 28 | body { 29 | width: 760px; 30 | margin: 0 auto; 31 | background-color: #FDFCD2; 32 | } 33 | 34 | h1 { 35 | font: italic normal 3em Baskerville, "Palatino Linotype", "Times New Roman", serif; 36 | color: #46874D; 37 | background: url(../images/underline.png) no-repeat 0px 88%; 38 | padding-left: 2px; 39 | } 40 | -------------------------------------------------------------------------------- /11_finished/table/images/star.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/11_finished/table/images/star.png -------------------------------------------------------------------------------- /11_finished/table/images/underline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/11_finished/table/images/underline.png -------------------------------------------------------------------------------- /13/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/13/.DS_Store -------------------------------------------------------------------------------- /13/html5shiv.js: -------------------------------------------------------------------------------- 1 | /* 2 | HTML5 Shiv v3.6.2pre | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed 3 | */ 4 | (function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag(); 5 | a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/\w+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x"; 6 | c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode|| 7 | "undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",version:"3.6.2pre",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);if(g)return a.createDocumentFragment(); 8 | for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;dArticle Title 2 |

Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor. Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum.

3 |

Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor.

4 |

Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor. Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum.

5 |

Subheading

6 |

Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor. Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum.

7 |

Subheading

8 |

Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor. Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor. Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor. Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tor

-------------------------------------------------------------------------------- /13/sidebar1.txt: -------------------------------------------------------------------------------- 1 |

Sidebar 1

2 |

Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor.

3 |

Secondary Header

4 |

Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum.

5 |

Secondary Header

6 |

Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum.

-------------------------------------------------------------------------------- /13/sidebar2.txt: -------------------------------------------------------------------------------- 1 |

Sidebar 2

2 |
    3 |
  • Aenean orci ante
    • 4 |
  • Venenatis non adipiscing vita
    • 5 |
  • Fringilla et neque
    • 6 |
  • Aenean orci ante
    • 7 |
  • Venenatis non adipiscing vita
    • 8 |
  • Fringilla et neque
    • 9 |
10 |

Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor.Suspendisse vitae quam lorem, in tempus velit.

11 |

Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor.Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor.

-------------------------------------------------------------------------------- /13/start.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS3: The Missing Manual 6 | 7 | 10 | 11 | 12 | 13 |
14 | 23 |

CSS3: The Missing Manual

24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
32 |

Copyright 2013, Greek Text Generator, Inc. 33 | Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor.

34 |

Contact: e-mail@here.com

35 |
36 | 37 | 38 | -------------------------------------------------------------------------------- /13/styles.css: -------------------------------------------------------------------------------- 1 | /* reset browser styles */ 2 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 3 | table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 4 | figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, 5 | time, mark, audio, video { 6 | margin: 0; 7 | padding: 0; 8 | border: 0; 9 | font-size: 100%; 10 | vertical-align: baseline; 11 | } 12 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 13 | display: block; 14 | } 15 | body { 16 | line-height: 1.2; 17 | } 18 | ol { 19 | padding-left: 1.4em; 20 | list-style: decimal; 21 | } 22 | ul { 23 | padding-left: 1.4em; 24 | list-style: square; 25 | } 26 | table { 27 | border-collapse: collapse; 28 | border-spacing: 0; 29 | } 30 | /* end reset browser styles */ 31 | 32 | .clear:after { 33 | content: " "; 34 | display: table; 35 | clear: both; 36 | } 37 | 38 | .clear { 39 | zoom: 1; 40 | } 41 | 42 | body { 43 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 44 | } 45 | 46 | 47 | header { 48 | background-color:rgb(93,43,78); 49 | background-image: -webkit-linear-gradient(right, rgb(93,43,78), rgb(8,2,50)); 50 | padding-bottom: 30px; 51 | } 52 | 53 | header h1 { 54 | font-size: 3em; 55 | color: white; 56 | font-weight: bold; 57 | padding-top: 30px; 58 | clear: both; 59 | padding-left: 10px; 60 | } 61 | 62 | nav { 63 | background-color: rgb(25,25,25); 64 | border: 1px solid rgba(255,255,255,.5); 65 | border-left: none; 66 | border-right: none; 67 | } 68 | nav ul { 69 | padding: 0; 70 | margin: 0; 71 | } 72 | nav li { 73 | float: left; 74 | padding: 0; 75 | margin: 0; 76 | list-style: none; 77 | } 78 | nav a { 79 | float: left; 80 | font-size: .8em; 81 | color: white; 82 | font-weight: normal; 83 | text-decoration: none; 84 | padding: 10px; 85 | border-right: 1px dashed rgba(255,255,255,.75); 86 | -webkit-transition: all .5s; 87 | -moz-transition: all .5s; 88 | -o-transition: all .5s; 89 | transition: all .5s; 90 | } 91 | nav li:last-of-type a { 92 | border-right: none; 93 | } 94 | nav a:hover { 95 | background-color: rgb(93,43,78); 96 | } 97 | aside h2 { 98 | font-size: 1.3em; 99 | margin-top: 10px; 100 | } 101 | aside h3 { 102 | font-size: 1.1em; 103 | margin-top: 15px; 104 | } 105 | aside p, aside li { 106 | font-size: .75em; 107 | margin-top: 10px; 108 | } 109 | .main h2 { 110 | font-size: 2em; 111 | margin-top: 10px; 112 | } 113 | .main h3 { 114 | font-size: 1.5em; 115 | margin-top: 20px; 116 | } 117 | .main p { 118 | margin-bottom: 15px; 119 | } 120 | footer { 121 | margin-top: 15px; 122 | font-size: .8em; 123 | padding: 10px 10px 30px 10px; 124 | background-color: black; 125 | color: rgb(204,204,204); 126 | } 127 | footer a { 128 | color: white; 129 | } 130 | /* add tutorial styles below here */ 131 | -------------------------------------------------------------------------------- /13_finished/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/13_finished/.DS_Store -------------------------------------------------------------------------------- /13_finished/html5shiv.js: -------------------------------------------------------------------------------- 1 | /* 2 | HTML5 Shiv v3.6.2pre | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed 3 | */ 4 | (function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag(); 5 | a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/\w+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x"; 6 | c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode|| 7 | "undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",version:"3.6.2pre",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);if(g)return a.createDocumentFragment(); 8 | for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;dArticle Title 2 |

Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor. Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum.

3 |

Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor.

4 |

Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor. Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum.

5 |

Subheading

6 |

Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor. Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum.

7 |

Subheading

8 |

Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor. Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor. Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor. Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tor

-------------------------------------------------------------------------------- /13_finished/sidebar1.txt: -------------------------------------------------------------------------------- 1 |

Sidebar 1

2 |

Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor.

3 |

Secondary Header

4 |

Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum.

5 |

Secondary Header

6 |

Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum.

7 | -------------------------------------------------------------------------------- /13_finished/sidebar2.txt: -------------------------------------------------------------------------------- 1 |

Sidebar 2

2 |
    3 |
  • Aenean orci ante
    • 4 |
  • Venenatis non adipiscing vita
    • 5 |
  • Fringilla et neque
    • 6 |
  • Aenean orci ante
    • 7 |
  • Venenatis non adipiscing vita
    • 8 |
  • Fringilla et neque
    • 9 |
10 |

Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor.Suspendisse vitae quam lorem, in tempus velit.

11 |

Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor.Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor.

-------------------------------------------------------------------------------- /13_finished/styles.css: -------------------------------------------------------------------------------- 1 | /* reset browser styles */ 2 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 3 | table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 4 | figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, 5 | time, mark, audio, video { 6 | margin: 0; 7 | padding: 0; 8 | border: 0; 9 | font-size: 100%; 10 | vertical-align: baseline; 11 | } 12 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 13 | display: block; 14 | } 15 | body { 16 | line-height: 1.2; 17 | } 18 | ol { 19 | padding-left: 1.4em; 20 | list-style: decimal; 21 | } 22 | ul { 23 | padding-left: 1.4em; 24 | list-style: square; 25 | } 26 | table { 27 | border-collapse: collapse; 28 | border-spacing: 0; 29 | } 30 | /* end reset browser styles */ 31 | 32 | .clear:after { 33 | content: " "; 34 | display: table; 35 | clear: both; 36 | } 37 | 38 | .clear { 39 | zoom: 1; 40 | } 41 | 42 | body { 43 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 44 | } 45 | 46 | 47 | header { 48 | background-color:rgb(93,43,78); 49 | background-image: -webkit-linear-gradient(right, rgb(93,43,78), rgb(8,2,50)); 50 | padding-bottom: 30px; 51 | } 52 | 53 | header h1 { 54 | font-size: 3em; 55 | color: white; 56 | font-weight: bold; 57 | padding-top: 30px; 58 | clear: both; 59 | padding-left: 10px; 60 | } 61 | 62 | nav { 63 | background-color: rgb(25,25,25); 64 | border: 1px solid rgba(255,255,255,.5); 65 | border-left: none; 66 | border-right: none; 67 | } 68 | nav ul { 69 | padding: 0; 70 | margin: 0; 71 | } 72 | nav li { 73 | float: left; 74 | padding: 0; 75 | margin: 0; 76 | list-style: none; 77 | } 78 | nav a { 79 | float: left; 80 | font-size: .8em; 81 | color: white; 82 | font-weight: normal; 83 | text-decoration: none; 84 | padding: 10px; 85 | border-right: 1px dashed rgba(255,255,255,.75); 86 | -webkit-transition: all .5s; 87 | -moz-transition: all .5s; 88 | -o-transition: all .5s; 89 | transition: all .5s; 90 | } 91 | nav li:last-of-type a { 92 | border-right: none; 93 | } 94 | nav a:hover { 95 | background-color: rgb(93,43,78); 96 | } 97 | aside h2 { 98 | font-size: 1.3em; 99 | margin-top: 10px; 100 | } 101 | aside h3 { 102 | font-size: 1.1em; 103 | margin-top: 15px; 104 | } 105 | aside p, aside li { 106 | font-size: .75em; 107 | margin-top: 10px; 108 | } 109 | .main h2 { 110 | font-size: 2em; 111 | margin-top: 10px; 112 | } 113 | .main h3 { 114 | font-size: 1.5em; 115 | margin-top: 20px; 116 | } 117 | .main p { 118 | margin-bottom: 15px; 119 | } 120 | footer { 121 | margin-top: 15px; 122 | font-size: .8em; 123 | padding: 10px 10px 30px 10px; 124 | background-color: black; 125 | color: rgb(204,204,204); 126 | } 127 | footer a { 128 | color: white; 129 | } 130 | /* add tutorial styles below here */ 131 | * { 132 | -moz-box-sizing: border-box; 133 | box-sizing: border-box; 134 | } 135 | 136 | /* uncomment this style if you want the entire page -- including background colors -- 137 | constrained inside a 1200 pixel, centered box */ 138 | /*.pageWrapper { 139 | max-width: 1200px; 140 | margin: 0 auto; 141 | }*/ 142 | 143 | .sidebar1 { 144 | float: left; 145 | width: 20%; 146 | padding: 0 20px 0 10px; 147 | } 148 | .main { 149 | float: left; 150 | width: 60%; 151 | padding: 0 20px; 152 | border-left: dashed 1px rgb(153,153,153); 153 | border-right: dashed 1px rgb(153,153,153); 154 | } 155 | .sidebar2 { 156 | float: right; 157 | width: 20%; 158 | padding: 0 10px 0 20px; 159 | } 160 | footer { 161 | clear: both; 162 | } 163 | nav ul, header h1, footer p, .contentWrapper { 164 | max-width: 1200px; 165 | margin: 0 auto; 166 | } 167 | 168 | 169 | -------------------------------------------------------------------------------- /14/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sawmac/CSS3/58b1f474aba1fbe2acbac51ceed69bd8b8710504/14/.DS_Store -------------------------------------------------------------------------------- /14/html5shiv.js: -------------------------------------------------------------------------------- 1 | /* 2 | HTML5 Shiv v3.6.2pre | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed 3 | */ 4 | (function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag(); 5 | a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/\w+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x"; 6 | c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode|| 7 | "undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",version:"3.6.2pre",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);if(g)return a.createDocumentFragment(); 8 | for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;darticle,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}mark{background:#FF0;color:#000}"; 6 | c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode|| 7 | "undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",version:"3.6.2pre",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);if(g)return a.createDocumentFragment(); 8 | for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d 2 | 3 | 4 | 5 | The Hat Gallery 6 | 7 | 11 | 14 | 15 | 16 |
17 |

The Hat Gallery The Hat Gallery

18 | 26 |
27 |
28 |
29 | Panama Hat 30 |
Nam libero tempore. Soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus
31 |
32 |
33 | Bonnet 34 |
Nam libero tempore. Soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus
35 |
36 |
37 | Pink hat 38 |
Nam libero tempore. Soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus
39 |
40 |
41 | Variety 42 |
Nam libero tempore. Soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus
43 |
44 |
45 | Hat 46 |
Nam libero tempore. Soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus
47 |
48 |
49 | Another bonnet 50 |
Nam libero tempore. Soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus
51 |
52 |
53 | Dude with hat 54 |
Nam libero tempore. Soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus
55 |
56 |
57 | Cool hat 58 |
Nam libero tempore. Soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus
59 |
60 |
61 | Top Hats 62 |
Nam libero tempore. Soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus
63 |
64 |
65 |
66 |
67 |

Copyright 2013, The Hat Gallery

68 |
69 |
70 | 71 | 72 | -------------------------------------------------------------------------------- /15/html5shiv.js: -------------------------------------------------------------------------------- 1 | /* 2 | HTML5 Shiv v3.6.2pre | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed 3 | */ 4 | (function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag(); 5 | a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/\w+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x"; 6 | c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode|| 7 | "undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",version:"3.6.2pre",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);if(g)return a.createDocumentFragment(); 8 | for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;darticle,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}mark{background:#FF0;color:#000}"; 6 | c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode|| 7 | "undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",version:"3.6.2pre",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);if(g)return a.createDocumentFragment(); 8 | for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d 2 | 3 | 4 | 5 | Untitled Document 6 | 72 | 73 | 74 | 75 |

Testing Out Web Fonts

76 |

When I was younger, I could remember anything, whether it had happened or not -- Mark Twain

77 | 78 | 79 | -------------------------------------------------------------------------------- /webfonts-demo/webfonts.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Untitled Document 6 | 65 | 66 | 67 | 68 |

Testing out Web Fonts

69 |

When I was younger, I could remember anything, whether it had happened or not -- Mark Twain

70 | 71 | 72 | --------------------------------------------------------------------------------