A More Perfect Union with CSS

5,674 views
5,544 views

Published on

Recreating the United States flag with semantic HTML and CSS to showcase a method for approaching designing for the Web in general.

Published in: Education, Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,674
On SlideShare
0
From Embeds
0
Number of Embeds
132
Actions
Shares
0
Downloads
29
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

A More Perfect Union with CSS

  1. 1. A More Perfect Union with CSS Christopher Schmitt http://twitter.com/teleject
  2. 2. Christopher Schmitt http://twitter.com/teleject
  3. 3. how do we go about ? solving our problems
  4. 4. we solve problems by realizing the limitations
  5. 5. #1 Our Experience Limits Our Designs
  6. 6. It’s Always a Plumbing Problem
  7. 7. #2 Our Browsers Limit Our Design
  8. 8. part 2: applications
  9. 9. HTML+CSS Example #1 http://www.flickr.com/photos/o2ma/186648711/
  10. 10. <p>...</p> <p>...</p> <blockquote> <p>Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti.</p> </blockquote> <p>...</p> <p>...</p>
  11. 11. blockquote { background-image: url(bracket_left.gif); background-repeat: no-repeat; padding: 10px 0 0 27px; width: 175px; margin: 0 0.7em 0 0; float: left; font-family: Georgia, Times, quot;Times New Romanquot;, serif; font-size: 1.2em; font-style: italic; color: black; }
  12. 12. blockquote p { background-image: url(bracket_right.gif); background-repeat: no-repeat; background-position: bottom right; margin: 0; padding: 0 22px 10px 0; width:150px; text-align: justify; line-height: 1.3em; }
  13. 13. <blockquote> bracket_left.gif <p> bracket_right.gif
  14. 14. HTML+CSS Example #2
  15. 15. Semantic Markup
  16. 16. 91 http://www.w3.org/TR/html4/index/elements.html
  17. 17. <h1><a href=quot;http:// www.usa.gov/quot;>United States of America</ a></h1> <ol><!-- Listing of States --> <li><a href=quot;http://www.alabama.gov/quot;> <strong>State of Alabama</strong><i></i> </a></li> <li><a href=quot;http://www.ct.gov/quot;> <em><strong>State of Connecticut</ strong></em><i></i> </a></li> ... </ol>
  18. 18. Some Common HTML Errors • <p>&nbsp;</p> • <p> ... <br><br><br> ... <br><br><br>... • <h2>Subject Matter<br></h2> • <p><h2>Subject Matter</h2></p> • <p><img ></p>
  19. 19. Setting Up the Easel
  20. 20. 3D View of Box Model
  21. 21. “CSS Reset” • http://developer.yahoo.com/yui/reset/ • http://meyerweb.com/eric/thoughts/ 2007/04/12/reset-styles/ • http://meyerweb.com/eric/tools/css/reset/ index.html
  22. 22. <div id=quot;easelquot;> <h1><a href=quot;http:// www.usa.gov/quot;>United States of America</ a></h1> <ol><!-- Listing of States --> <li><a href=quot;http://www.alabama.gov/quot;> <strong>State of Alabama</strong> </a></li> ... </ol> </div><!-- /easel -->
  23. 23. body { margin: 10px 0 0 0; padding: 0; text-align: center; } #easel { width: 955px; margin: 0 auto; text-align: left; position: relative; }
  24. 24. Clearing Out the Content
  25. 25. #easel ol { list-style: none; margin: 0; padding: 0; } #easel strong { display: none; }
  26. 26. Striping
  27. 27. Normal Flow • While normal flow is the default method of rendering a page, the placement of the elements can be altered • Floats • CSS position property • Values: absolute, relative, fixed or static
  28. 28. Absolute Positioning • When an element is absolutely positioned, it is taken out of normal flow and positioned relative to the edges of its containing box, according to its offset properties. • Absolutely positioned elements are ignored by other elements within normal flow.
  29. 29. Relative Positioning • When an element is relatively positioned, it is initially placed within normal flow, and then adjusted according to its offset properties. • #positioned { position: relative; top: 50px; right: 30px; background-color: #eee; }
  30. 30. Relative Positioning • The browser lays out the paragraphs according to normal flow, then offsets the positioned paragraph 50 pixels from the top, and 30 pixels from the right of its default position. • And like absolute positioning, relatively positioned elements can overlap other elements. • Note that if you don’t specify any offset properties for a relatively positioned element, it is placed according to normal flow.
  31. 31. #easel { width: 955px; margin: 0 auto; text-align: left; position: relative; } #easel em { width: 955px; height: 50px; display: block; background: #BF0A30; position: absolute; top: 0; left: 0; z-index: 1; }
  32. 32. 13
  33. 33. Attribute Selectors • a[title] { /* rules */ } a[href] { /* rules */ } • p[id] { /* rules */ } p[class] { /* rules */ } • img[alt] { /* rules */ } img[src] { /* rules */ } • blockquote[cite] { /* rules */ }
  34. 34. a[href=quot;http://delaware.gov/quot;] em { background: white; top: 50px; left: 0; } a[href=quot;http://www.georgia.gov/quot;] em { top: 100px; left: 0; } ...
  35. 35. Pooling the Stars
  36. 36. h1 a { position: absolute; width: 440px; height: 350px; background: #002868; text-indent: -9999em; margin: 0; padding: 0; z-index: 20; }
  37. 37. Getting Rid of Text • sIFR (Scalable Inman Flash Replacement): http://wiki.novemberborn.net/sifr3 • Image Replacement Rundown: http://mezzoblue.com/tests/revised-image- replacement/
  38. 38. Stars
  39. 39. Block Level - <h2> Inline - <strong>
  40. 40. a[href=quot;http://www.alabama.gov/quot;] i { background-image: url(stars.gif); display: block; position: absolute; top: 13px; left: 13px; z-index: 50; width: 24px; height: 23px; }
  41. 41. Texture
  42. 42. Alpha Transparency (PNGs) http://christopherschmitt.com/2007/10/30/png-transparency- for-internet-explorer-ie6-and-beyond/
  43. 43. Alpha Transparency (PNGs)
  44. 44. Adding PNGs • First, download the .htc script at TwinHelix Designs. • http://www.twinhelix.com/css/iepngfix/
  45. 45. Adding PNGs • First, download the .htc script at TwinHelix Designs. • http://www.twinhelix.com/css/iepngfix/ • After downloading the script, upload the script to your Web server.
  46. 46. Adding PNGs • Then, create a blank gif file. • This image file is 1×1 pixel with the color set as transparent. Within the .htc script, change the line that references the blank.gif file so that it points to your gif’s location on the server.
  47. 47. Adding PNGs • Create a separate CSS file (we’ll name it ie.css), and include within in the following single line, referencing the location of the .htc file: • img { behavior: url(iepngfix.htc); }
  48. 48. Adding PNGs • But, we only want to load this CSS file when the page is viewed in IE6-. • Use conditional comments: <!--[if lte IE 6]> <link rel=quot;stylesheetquot; type=quot;text/cssquot; media=quot;screenquot; href=quot;ie.cssquot; /> <![endif]-->
  49. 49. #easel em { width: 955px; height: 50px; display: block; background: #BF0A30; position: absolute; top: 0; left: 0; z-index: 1; background-image: url(flag_bkgd.png); background-position: 50%; background-attachment: fixed; }
  50. 50. #easel h1 a { position: absolute; width: 440px; height: 350px; background: #002868; text-indent: -9999em; margin: 0; padding: 0; z-index: 20; background-image: url(flag_bkgd.png); background-position: 50%; background-repeat: no-repeat; background-attachment: fixed; }
  51. 51. a[href=quot;http://delaware.gov/quot;] em { background: white; top: 50px; left: 0; background-image: url(flag_bkgd.png); background-position: 50%; background-attachment: fixed; }
  52. 52. Stretching
  53. 53. Setting Fonts with Ems • “Default size in all browsers is 16 pixels” • Multiply default size by 62.5%, you get 10px • http://clagnut.com/blog/348/ • http://www.alistapart.com/articles/ howtosizetextincss/
  54. 54. body { font-size: 62.5%; margin: 10px 0 0 0; padding: 0; text-align: center; }
  55. 55. Design Fixed Flexible Element Flag Width 955px 95.5em Stripe Height 50px 5em Star Top 13px 1.3em Star Left 90px 9em
  56. 56. Design Fixed Flexible Element Union Height 440px 44em Union Width 350px 35em
  57. 57. Design X Fixed Flexible Element Union Height 440px 44em Union Width 350px 35em
  58. 58. #easel h1 a { position: absolute; width: 21.5em; height: 17.5em; background: #002868; text-indent: -9999em; margin: 0; padding: 0; z-index: 20; background-image: url(flag_bkgd3.png); background-position: 50%; background-attachment: fixed; }
  59. 59. OMG! Stars
  60. 60. i:after { content: quot;Mquot;; color: white; font-size: 2em; }
  61. 61. i:after { content: quot;48quot;; // unicode font-family: quot;Zapf Dingbatsquot;; color: white; font-size: 2.5em; font-style: normal; }
  62. 62. #1 Our Experience Limits Our Designs #2 Our Browsers Limit Our Design
  63. 63. The CSS Summit • Eight CSS experts: • Molly Holzschlag, Stephanie Sullivan, Kimberly Blessing, Dave McFarland, more • Virtual conference • CSS + Web fonts, IE6, jQuery, Flexible Layouts, etc. • July 18th, 9-5pm ET • http://CSSSummit.com/
  64. 64. THANK YOU! Christopher Schmitt schmitt@heatvision.com http://twitter.com/teleject ChristopherSchmitt.com

×