A More Perfect
Union with CSS


Christopher Schmitt
http://twitter.com/teleject
Christopher Schmitt
http://twitter.com/teleject
how do we go about
                   ?
solving our problems
we solve problems by
realizing the limitations
#1
Our Experience
Limits Our Designs
It’s Always a
    Plumbing
     Problem
#2
Our Browsers
Limit Our Design
part 2: applications
HTML+CSS
             Example #1




http://www.flickr.com/photos/o2ma/186648711/
<p>...</p>
<p>...</p>

<blockquote>
 <p>Ma quande lingues coalesce, li
grammatica del resultant
lingue es plu simplic e re...
blockquote {
 background-image: url(bracket_left.gif);
 background-repeat: no-repeat;
 padding: 10px 0 0 27px;
 width: 175...
blockquote p {
 background-image: url(bracket_right.gif);
 background-repeat: no-repeat;
 background-position: bottom righ...
<blockquote>
 bracket_left.gif

    <p>




                    bracket_right.gif
HTML+CSS
Example #2
Semantic
Markup
91
http://www.w3.org/TR/html4/index/elements.html
<h1><a href=quot;http://
www.usa.gov/quot;>United States of America</
a></h1>

 <ol><!-- Listing of States -->
  <li><a hr...
Some Common
       HTML Errors
• <p>&nbsp;</p>
• <p> ... <br><br><br> ... <br><br><br>...
• <h2>Subject Matter<br></h2>
• ...
Setting Up
the Easel
3D View of Box Model
“CSS Reset”

• http://developer.yahoo.com/yui/reset/
• http://meyerweb.com/eric/thoughts/
  2007/04/12/reset-styles/
  • h...
<div id=quot;easelquot;>

 <h1><a href=quot;http://
www.usa.gov/quot;>United States of America</
a></h1>

 <ol><!-- Listin...
body {
  margin: 10px 0 0 0;
  padding: 0;
  text-align: center;
}
#easel {
  width: 955px;
  margin: 0 auto;
  text-align...
Clearing Out
the Content
#easel ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

#easel strong {
  display: none;
}
Striping
Normal Flow

• While normal flow is the default method of
  rendering a page, the placement of the
  elements can be altere...
Absolute Positioning

• When an element is absolutely positioned, it
  is taken out of normal flow and positioned
  relativ...
Relative Positioning
•   When an element is relatively positioned, it is
    initially placed within normal flow, and then
...
Relative Positioning
•   The browser lays out the paragraphs according
    to normal flow, then offsets the positioned
    ...
#easel {
    width: 955px;
    margin: 0 auto;
    text-align: left;
    position: relative;
  }
#easel em {
    width: 95...
13
Attribute Selectors
•   a[title] { /* rules */ }
    a[href] { /* rules */ }

•   p[id] { /* rules */ }
    p[class] { /* ...
a[href=quot;http://delaware.gov/quot;] em {
  background: white;
  top: 50px;
  left: 0;
}
a[href=quot;http://www.georgia....
Pooling the Stars
h1 a {
  position: absolute;
  width: 440px;
  height: 350px;
  background: #002868;
  text-indent: -9999em;
  margin: 0;
...
Getting Rid of Text
• sIFR (Scalable Inman Flash Replacement):
  http://wiki.novemberborn.net/sifr3
• Image Replacement Ru...
Stars
Block Level - <h2>




Inline - <strong>
a[href=quot;http://www.alabama.gov/quot;] i {
  background-image: url(stars.gif);
  display: block;
  position: absolute;
...
Texture
Alpha Transparency (PNGs)

http://christopherschmitt.com/2007/10/30/png-transparency-
             for-internet-explorer-i...
Alpha Transparency (PNGs)
Adding PNGs
• First, download the .htc script at TwinHelix
  Designs.
  • http://www.twinhelix.com/css/iepngfix/
Adding PNGs
• First, download the .htc script at TwinHelix
  Designs.
  • http://www.twinhelix.com/css/iepngfix/
• After do...
Adding PNGs
• Then, create a blank gif file.
 • This image file is 1×1 pixel with the color
    set as transparent. Within t...
Adding PNGs
• Create a separate CSS file (we’ll name it
  ie.css), and include within in the following
  single line, refer...
Adding PNGs
• But, we only want to load this CSS file when
  the page is viewed in IE6-.
• Use conditional comments:
  <!--...
#easel em {
  width: 955px;
  height: 50px;
  display: block;
  background: #BF0A30;
  position: absolute;
  top: 0;
  lef...
#easel h1 a {
  position: absolute;
  width: 440px;
  height: 350px;
  background: #002868;
  text-indent: -9999em;
  marg...
a[href=quot;http://delaware.gov/quot;] em {
 background: white;
  top: 50px;
  left: 0;
  background-image: url(flag_bkgd....
Stretching
Setting Fonts with Ems

• “Default size in all browsers is 16 pixels”
• Multiply default size by 62.5%, you get 10px
 • ht...
body {
  font-size: 62.5%;
  margin: 10px 0 0 0;
  padding: 0;
 text-align: center;
}
Design
                Fixed   Flexible
  Element

 Flag Width     955px   95.5em

Stripe Height   50px     5em

  Star To...
Design
               Fixed   Flexible
  Element

Union Height   440px    44em


Union Width    350px    35em
Design




               X
               Fixed   Flexible
  Element

Union Height   440px    44em


Union Width    350px...
#easel h1 a {
  position: absolute;
  width: 21.5em;
  height: 17.5em;
  background: #002868;
  text-indent: -9999em;
  ma...
OMG! Stars
i:after {
  content: quot;Mquot;;
  color: white;
  font-size: 2em;
}
i:after {
  content: quot;48quot;; // unicode
  font-family: quot;Zapf Dingbatsquot;;
  color: white;
  font-size: 2.5em;
...
#1
Our Experience
Limits Our Designs
        #2
 Our Browsers
 Limit Our Design
The CSS Summit
• Eight CSS experts:
 • Molly Holzschlag, Stephanie Sullivan,
    Kimberly Blessing, Dave McFarland, more
•...
THANK YOU!


Christopher Schmitt
schmitt@heatvision.com
http://twitter.com/teleject
ChristopherSchmitt.com
A More Perfect Union with CSS
A More Perfect Union with CSS
A More Perfect Union with CSS
A More Perfect Union with CSS
A More Perfect Union with CSS
A More Perfect Union with CSS
A More Perfect Union with CSS
A More Perfect Union with CSS
A More Perfect Union with CSS
A More Perfect Union with CSS
A More Perfect Union with CSS
A More Perfect Union with CSS
A More Perfect Union with CSS
A More Perfect Union with CSS
A More Perfect Union with CSS
A More Perfect Union with CSS
A More Perfect Union with CSS
A More Perfect Union with CSS
A More Perfect Union with CSS
A More Perfect Union with CSS
A More Perfect Union with CSS
A More Perfect Union with CSS
A More Perfect Union with CSS
A More Perfect Union with CSS
A More Perfect Union with CSS
A More Perfect Union with CSS
A More Perfect Union with CSS
A More Perfect Union with CSS
A More Perfect Union with CSS
A More Perfect Union with CSS
A More Perfect Union with CSS
A More Perfect Union with CSS
A More Perfect Union with CSS
A More Perfect Union with CSS
A More Perfect Union with CSS
A More Perfect Union with CSS
A More Perfect Union with CSS
A More Perfect Union with CSS
A More Perfect Union with CSS
A More Perfect Union with CSS
A More Perfect Union with CSS
A More Perfect Union with CSS
A More Perfect Union with CSS
A More Perfect Union with CSS
A More Perfect Union with CSS
A More Perfect Union with CSS
A More Perfect Union with CSS
A More Perfect Union with CSS
A More Perfect Union with CSS
Upcoming SlideShare
Loading in...5
×

A More Perfect Union with CSS

5,380

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
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,380
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
29
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "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

×