Implementing  AwesomeAn HTML5/CSS3 Workshop    Shoshi Roberts       @Shoshizilla
Hi, I’m Shoshi!
I work For mintdigital.com
I Do...
What ISHTML5?
What ISHTML5?
Tons of New Elements
Layout<header>      <hgroup><nav>                         <aside> <section>  <article><footer>
Text: Elements<abbr title=“Oh My God”>OMG</abbr><small>Good for legalese</small><address>555 Sector 5, Planet Earth</addre...
Text: Formatting<strong>   = Importance (bold)<b>        = Stylistically Different<em>       = Emphasis (italic)<i>       ...
MEDIA: Video<video src="cat.mp4" width="480" height="320"       type="video/mp4" controls preload></video>
MEDIA: AuDIO<audio src="cake.mp3" type="audio/mpeg" autoplay></audio>
Semantic        Hierarchy<h1>Page Title</h1><section>  <h1>Section Title</h1>  ...</section>
Links Just Got   Awesome<a href=“/the-future.html”>  <div>       <p>Yep, this validates now.</p>  </div></a>
Forms AreOur Friends
Form: Inputs<input type=“password”>            “search”            “number”            “range”            “color”         ...
Form: Attributes<input type=“text” placeholder=“Holding your place...”>
Form: Attributes<input type=“text” maxlength=“140”><input type=“text” required><form novalidate>
What Can I   Use Now?Updating an Existing Document
Change your          DOctype                 <!DOCTYPE html>                      VS<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTM...
<head></head>
Cleaner Charset         <meta charset=”utf-8”>                  VS<meta http-equiv="content-type"      content="text/html;...
Less is More<link href=”stylesheet.css” rel=”stylesheet”      type=”text/css”>
<body></body>
Have Fun WithNew Elements     <header> ... </header>Or for More Compatibility <div class=”header”> ... </div>
Less is Still        More<script src=”script.js”        type=”text/javascript”></script> Please don’t put me in the <head>.
What AboutOlder BrowSers?
HTML5Shim/vcode.google.com/p/html5shim/
ModerniZR modernizr.com
Experiences   Will Be  DifferentJust make Sure they’re usable
But Wait! There’s More...
Other Awesome  Features
Stay Up TO Datehtml5rocks.comdevelopers.whatwg.org
CSS3
More Than A Box<div class=”box”>  <p>    I&rsquo;m a box!  </p></div>
div.box { width: 250px; padding: 135px 25px;    margin: 60px auto; background: #FFF; color: #444;}div.box p {    text-alig...
div.box {      -moz-border-radius:    30px;      -webkit-border-radius: 30px;    border-radius:           30px;}
div.box {      -moz-border-radius:    300px;      -webkit-border-radius: 300px;    border-radius:           300px;}
Vendor Prefixes  element {        -moz-property:    x;        -webkit-property: x;        -o-property:      x;        -ms-...
ACCessibility    caniuse.com
div.box {    border-top-left-radius: 10px;    border-bottom-right-radius:     120px;}
div.box {    background: #DDD;    text-shadow: 0 1px 1px #FFF;}
div.box {    background: #DDD;    background: rgba(255,255,255,0.75);    /*                  r,   g,   b,   a */}
div.box {    background: #DDD;    background: linear-gradient(top, #FFF 0%, #777 100%);}
div.box {    background: #DDD;    background: radial-gradient(                  rgba(255, 255, 255, 1) 0%,                ...
div.box {    box-shadow: 10px 10px 0 #FA0;}
div.box {    box-shadow: inset 0 0 15px #000;}
div.box:before {    content: ;    position: absolute;    top: -30px;    left: -30px;    width: 300px;    height: 300px;   ...
div.box:after {    content: ;    position: absolute;    top: 30px;    left: 30px;    width: 300px;    height: 300px;    z-...
Animations!
div.box:after {    animation-name:                  rotate;    animation-duration:              0.6s;    animation-iterati...
WorkshopMake The Most Awesome Box       (or non-box}   Want Starter COde?       bit.ly/pygotham
Questions?
A Special  Thanks To:PAMGloriaPYGothamMint Digital
Happy Hacking!   Shoshi Roberts      @Shoshizilla
Implementing Awesome: An HTML5/CSS3 Workshop
Implementing Awesome: An HTML5/CSS3 Workshop
Upcoming SlideShare
Loading in …5
×

Implementing Awesome: An HTML5/CSS3 Workshop

3,575 views

Published on

We go over what parts of HTML5 and CSS3 you can use right away and how to degrade gracefully in order to appease the older browsers. Then, we play with some of the awesome visual candy you can make using the latest properties.
- Presented at PyGotham

Published in: Technology, Design

Implementing Awesome: An HTML5/CSS3 Workshop

  1. Implementing AwesomeAn HTML5/CSS3 Workshop Shoshi Roberts @Shoshizilla
  2. Hi, I’m Shoshi!
  3. I work For mintdigital.com
  4. I Do...
  5. What ISHTML5?
  6. What ISHTML5?
  7. Tons of New Elements
  8. Layout<header> <hgroup><nav> <aside> <section> <article><footer>
  9. Text: Elements<abbr title=“Oh My God”>OMG</abbr><small>Good for legalese</small><address>555 Sector 5, Planet Earth</address><time>April, 1 2050</time>
  10. Text: Formatting<strong> = Importance (bold)<b> = Stylistically Different<em> = Emphasis (italic)<i> = Alternate Voice or Mood
  11. MEDIA: Video<video src="cat.mp4" width="480" height="320" type="video/mp4" controls preload></video>
  12. MEDIA: AuDIO<audio src="cake.mp3" type="audio/mpeg" autoplay></audio>
  13. Semantic Hierarchy<h1>Page Title</h1><section> <h1>Section Title</h1> ...</section>
  14. Links Just Got Awesome<a href=“/the-future.html”> <div> <p>Yep, this validates now.</p> </div></a>
  15. Forms AreOur Friends
  16. Form: Inputs<input type=“password”> “search” “number” “range” “color” “tel” “email” “url” “date”, “week”, “datetime-local”, ... “file”
  17. Form: Attributes<input type=“text” placeholder=“Holding your place...”>
  18. Form: Attributes<input type=“text” maxlength=“140”><input type=“text” required><form novalidate>
  19. What Can I Use Now?Updating an Existing Document
  20. Change your DOctype <!DOCTYPE html> VS<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  21. <head></head>
  22. Cleaner Charset <meta charset=”utf-8”> VS<meta http-equiv="content-type" content="text/html; charset=utf-8">
  23. Less is More<link href=”stylesheet.css” rel=”stylesheet” type=”text/css”>
  24. <body></body>
  25. Have Fun WithNew Elements <header> ... </header>Or for More Compatibility <div class=”header”> ... </div>
  26. Less is Still More<script src=”script.js” type=”text/javascript”></script> Please don’t put me in the <head>.
  27. What AboutOlder BrowSers?
  28. HTML5Shim/vcode.google.com/p/html5shim/
  29. ModerniZR modernizr.com
  30. Experiences Will Be DifferentJust make Sure they’re usable
  31. But Wait! There’s More...
  32. Other Awesome Features
  33. Stay Up TO Datehtml5rocks.comdevelopers.whatwg.org
  34. CSS3
  35. More Than A Box<div class=”box”> <p> I&rsquo;m a box! </p></div>
  36. div.box { width: 250px; padding: 135px 25px; margin: 60px auto; background: #FFF; color: #444;}div.box p { text-align: center;}
  37. div.box { -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px;}
  38. div.box { -moz-border-radius: 300px; -webkit-border-radius: 300px; border-radius: 300px;}
  39. Vendor Prefixes element { -moz-property: x; -webkit-property: x; -o-property: x; -ms-property: x; property: x; }
  40. ACCessibility caniuse.com
  41. div.box { border-top-left-radius: 10px; border-bottom-right-radius: 120px;}
  42. div.box { background: #DDD; text-shadow: 0 1px 1px #FFF;}
  43. div.box { background: #DDD; background: rgba(255,255,255,0.75); /* r, g, b, a */}
  44. div.box { background: #DDD; background: linear-gradient(top, #FFF 0%, #777 100%);}
  45. div.box { background: #DDD; background: radial-gradient( rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 70%);}
  46. div.box { box-shadow: 10px 10px 0 #FA0;}
  47. div.box { box-shadow: inset 0 0 15px #000;}
  48. div.box:before { content: ; position: absolute; top: -30px; left: -30px; width: 300px; height: 300px; z-index: -1; background: rgba(255,221,0,0.5);}div.box { position: relative;}
  49. div.box:after { content: ; position: absolute; top: 30px; left: 30px; width: 300px; height: 300px; z-index: -2; background: rgba(255,165,0,0.5);}
  50. Animations!
  51. div.box:after { animation-name: rotate; animation-duration: 0.6s; animation-iteration-count: infinite; animation-timing-function: linear;}@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}
  52. WorkshopMake The Most Awesome Box (or non-box} Want Starter COde? bit.ly/pygotham
  53. Questions?
  54. A Special Thanks To:PAMGloriaPYGothamMint Digital
  55. Happy Hacking! Shoshi Roberts @Shoshizilla

×