1 / 30

WEB DEVELOpment immersive building page layouts

WEB DEVELOpment immersive building page layouts. Topics. Box Model Scaling Positioning Boxes Box Aesthetics HTML 5 Semantic Tags CSS Resets. Box Model. Padding (spacing inside an element) Margin (spacing outside an element) Border (colors, styles). W3C Box Model. IE Box Model.

sema
Download Presentation

WEB DEVELOpment immersive building page layouts

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. WEB DEVELOpment immersivebuilding page layouts

  2. Topics • Box Model • Scaling • Positioning Boxes • Box Aesthetics • HTML 5 Semantic Tags • CSS Resets WEB DEVELOPMENT IMMERSIVE

  3. Box Model • Padding (spacing inside an element) • Margin (spacing outside an element) • Border (colors, styles) WEB DEVELOPMENT IMMERSIVE

  4. W3C Box Model WEB DEVELOPMENT IMMERSIVE

  5. IE Box Model WEB DEVELOPMENT IMMERSIVE

  6. IE Box Model FIX SOLUTIONS • CSS 1 & 2 hacks • Box in a box method • CSS 3 box-sizing property WEB DEVELOPMENT IMMERSIVE

  7. CSS 1 & 2 Hacks (Don’t Do this!) div {    width: 100px;  }div {    \width: 140px;    w\idth: 100px;} WEB DEVELOPMENT IMMERSIVE

  8. BOX IN A BOX METHOD (100% support) div { width: 100px; padding:0; margin:0; } .i { padding: 1em; } <div> <div class="i"> Text </div> </div> WEB DEVELOPMENT IMMERSIVE

  9. CSS 3 Box-sizing property (90.2% support) div { box-sizing:border-box; } /* IE model = border-box W3C model = content-box */ WEB DEVELOPMENT IMMERSIVE

  10. CSS 3 Box-sizing support WEB DEVELOPMENT IMMERSIVE

  11. Scaling elements • Static (px) • Fluid (%) • Responsive (min, max) • Auto WEB DEVELOPMENT IMMERSIVE

  12. Content OVERFLOW WEB DEVELOPMENT IMMERSIVE

  13. Positioning (part 1) • Static (default) • Floating WEB DEVELOPMENT IMMERSIVE

  14. Floating WEB DEVELOPMENT IMMERSIVE

  15. Clearing WEB DEVELOPMENT IMMERSIVE

  16. Clearing clear:both; WEB DEVELOPMENT IMMERSIVE

  17. Floating WEB DEVELOPMENT IMMERSIVE

  18. Box aesthetics • Background (color, images) • Box Shadow • Borders • Border Radius • Opacity WEB DEVELOPMENT IMMERSIVE

  19. Background Properties background-color: background-image: background-position: background-repeat: background-scroll: background-size: background: WEB DEVELOPMENT IMMERSIVE

  20. Box SHADOW WEB DEVELOPMENT IMMERSIVE

  21. Border styles WEB DEVELOPMENT IMMERSIVE

  22. Border radius WEB DEVELOPMENT IMMERSIVE

  23. opacity WEB DEVELOPMENT IMMERSIVE

  24. HTML 5 Semantic layout tags • Header • Footer • Nav • Aside • Section • Article • Hgroup • Figure • Figcaption WEB DEVELOPMENT IMMERSIVE

  25. Div layout WEB DEVELOPMENT IMMERSIVE

  26. Html5 sematic tag layout WEB DEVELOPMENT IMMERSIVE

  27. CSS RESETS WEB DEVELOPMENT IMMERSIVE

  28. Popular CSS RESETS • Meyers • Toucan • YUI • “poor-man’s” WEB DEVELOPMENT IMMERSIVE

  29. Poor man’s reset html, body { padding: 0; margin: 0; } html { font-size: 1em; } body { font-size: 100%; } a img, a:link img, a:visited img { border: 0; } WEB DEVELOPMENT IMMERSIVE

  30. WEB DEVELOPMENT IMMERSIVE

More Related