Your SlideShare is downloading. ×
A More Perfect Union with CSS
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

A More Perfect Union with CSS

5,340
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.

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,340
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
29
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. A More Perfect Union with CSS Christopher Schmitt http://twitter.com/teleject
  • 2. Christopher Schmitt http://twitter.com/teleject
  • 3. how do we go about ? solving our problems
  • 4. we solve problems by realizing the limitations
  • 5. #1 Our Experience Limits Our Designs
  • 6. It’s Always a Plumbing Problem
  • 7. #2 Our Browsers Limit Our Design
  • 8. part 2: applications
  • 9. HTML+CSS Example #1 http://www.flickr.com/photos/o2ma/186648711/
  • 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. 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. 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. <blockquote> bracket_left.gif <p> bracket_right.gif
  • 14. HTML+CSS Example #2
  • 15. Semantic Markup
  • 16. 91 http://www.w3.org/TR/html4/index/elements.html
  • 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. 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. Setting Up the Easel
  • 20. 3D View of Box Model
  • 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. <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. body { margin: 10px 0 0 0; padding: 0; text-align: center; } #easel { width: 955px; margin: 0 auto; text-align: left; position: relative; }
  • 24. Clearing Out the Content
  • 25. #easel ol { list-style: none; margin: 0; padding: 0; } #easel strong { display: none; }
  • 26. Striping
  • 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. 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. 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. 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. #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. 13
  • 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. 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. Pooling the Stars
  • 36. h1 a { position: absolute; width: 440px; height: 350px; background: #002868; text-indent: -9999em; margin: 0; padding: 0; z-index: 20; }
  • 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. Stars
  • 39. Block Level - <h2> Inline - <strong>
  • 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. Texture
  • 42. Alpha Transparency (PNGs) http://christopherschmitt.com/2007/10/30/png-transparency- for-internet-explorer-ie6-and-beyond/
  • 43. Alpha Transparency (PNGs)
  • 44. Adding PNGs • First, download the .htc script at TwinHelix Designs. • http://www.twinhelix.com/css/iepngfix/
  • 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. 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. 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. 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. #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. #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. 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. Stretching
  • 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. body { font-size: 62.5%; margin: 10px 0 0 0; padding: 0; text-align: center; }
  • 55. Design Fixed Flexible Element Flag Width 955px 95.5em Stripe Height 50px 5em Star Top 13px 1.3em Star Left 90px 9em
  • 56. Design Fixed Flexible Element Union Height 440px 44em Union Width 350px 35em
  • 57. Design X Fixed Flexible Element Union Height 440px 44em Union Width 350px 35em
  • 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. OMG! Stars
  • 60. i:after { content: quot;Mquot;; color: white; font-size: 2em; }
  • 61. i:after { content: quot;48quot;; // unicode font-family: quot;Zapf Dingbatsquot;; color: white; font-size: 2.5em; font-style: normal; }
  • 62. #1 Our Experience Limits Our Designs #2 Our Browsers Limit Our Design
  • 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. THANK YOU! Christopher Schmitt schmitt@heatvision.com http://twitter.com/teleject ChristopherSchmitt.com