Implementing Awesome: An HTML5/CSS3 Workshop
•
4 likes•3,466 views
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
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Implementing Awesome: An HTML5/CSS3 Workshop
Similar to Implementing Awesome: An HTML5/CSS3 Workshop (20)
Recently uploaded
Recently uploaded (20)
Implementing Awesome: An HTML5/CSS3 Workshop
- 1. Implementing Awesome An HTML5/CSS3 Workshop Shoshi Roberts @Shoshizilla
- 3. I work For mintdigital.com
- 4. I Do...
- 8. Tons of New Elements
- 9. Layout <header> <hgroup> <nav> <aside> <section> <article> <footer>
- 10. 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>
- 11. Text: Formatting <strong> = Importance (bold) <b> = Stylistically Different <em> = Emphasis (italic) <i> = Alternate Voice or Mood
- 12. MEDIA: Video <video src="cat.mp4" width="480" height="320" type="video/mp4" controls preload></video>
- 13. MEDIA: AuDIO <audio src="cake.mp3" type="audio/mpeg" autoplay></audio>
- 14. Semantic Hierarchy <h1>Page Title</h1> <section> <h1>Section Title</h1> ... </section>
- 15. Links Just Got Awesome <a href=“/the-future.html”> <div> <p>Yep, this validates now.</p> </div> </a>
- 17. Form: Inputs <input type=“password”> “search” “number” “range” “color” “tel” “email” “url” “date”, “week”, “datetime-local”, ... “file”
- 18. Form: Attributes <input type=“text” placeholder=“Holding your place...”>
- 19. Form: Attributes <input type=“text” maxlength=“140”> <input type=“text” required> <form novalidate>
- 20. What Can I Use Now? Updating an Existing Document
- 21. Change your DOctype <!DOCTYPE html> VS <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- 22. <head> </head>
- 23. Cleaner Charset <meta charset=”utf-8”> VS <meta http-equiv="content-type" content="text/html; charset=utf-8">
- 24. Less is More <link href=”stylesheet.css” rel=”stylesheet” type=”text/css”>
- 25. <body> </body>
- 26. Have Fun With New Elements <header> ... </header> Or for More Compatibility <div class=”header”> ... </div>
- 27. Less is Still More <script src=”script.js” type=”text/javascript”></script> Please don’t put me in the <head>.
- 31. Experiences Will Be Different Just make Sure they’re usable
- 32. But Wait! There’s More...
- 33. Other Awesome Features
- 34. Stay Up TO Date html5rocks.com developers.whatwg.org
- 35. CSS3
- 36. More Than A Box <div class=”box”> <p> I’m a box! </p> </div>
- 37. div.box { width: 250px; padding: 135px 25px; margin: 60px auto; background: #FFF; color: #444; } div.box p { text-align: center; }
- 38. div.box { -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; }
- 39. div.box { -moz-border-radius: 300px; -webkit-border-radius: 300px; border-radius: 300px; }
- 40. Vendor Prefixes element { -moz-property: x; -webkit-property: x; -o-property: x; -ms-property: x; property: x; }
- 41. ACCessibility caniuse.com
- 42. div.box { border-top-left-radius: 10px; border-bottom-right-radius: 120px; }
- 43. div.box { background: #DDD; text-shadow: 0 1px 1px #FFF; }
- 44. div.box { background: #DDD; background: rgba(255,255,255,0.75); /* r, g, b, a */ }
- 45. div.box { background: #DDD; background: linear-gradient(top, #FFF 0%, #777 100%); }
- 46. div.box { background: #DDD; background: radial-gradient( rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 70%); }
- 47. div.box { box-shadow: 10px 10px 0 #FA0; }
- 48. div.box { box-shadow: inset 0 0 15px #000; }
- 49. 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; }
- 50. div.box:after { content: ''; position: absolute; top: 30px; left: 30px; width: 300px; height: 300px; z-index: -2; background: rgba(255,165,0,0.5); }
- 51. Animations!
- 52. 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); } }
- 54. Workshop Make The Most Awesome Box (or non-box} Want Starter COde? bit.ly/pygotham
- 55. Questions?
- 56. A Special Thanks To: PAM Gloria PYGotham Mint Digital
- 57. Happy Hacking! Shoshi Roberts @Shoshizilla