HTML5
 CSS3
Shane
Becker
@veganstraightedge
HTML5
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
NEW
ELEMENTS
<article>
<aside>
<audio>
<b>
<canvas>
<details>
<embed>
<footer>
<header>
<hgroup>
<i>
<mark>
<nav>
<progress>
<section>
<summary>
<time>
<video>
HTML5
FORMS
<input type=*>
type="email"
type="url"
type="tel"
type="search"
type="date"
type="datetime"
type="number"
type="range"
type="color"
placeholder
autofocus
HTML5
FRIENDS
geolocation
local storage
offline apps
web workers
web sockets
drag and drop
data-* attrs
Much more...
CSS3
border-radius
linear-gradient
radial-gradient
media queries
box-shadow
text-shadow
multiple
backgrounds
border-image
@font-face
:before
:after
:first-child
:last-child
:nth-child( )
:nth-child(even)
:nth-child(odd)
:nth-child(10n-1)
img[alt=foo]
RGBa
OMG PUPPIES!
Post GoGaRuco 2010 hack day at Pivotal Labs : HTML5 & CSS3
Upcoming SlideShare
Loading in …5
×

Post GoGaRuco 2010 hack day at Pivotal Labs : HTML5 & CSS3

1,243 views

Published on

Presented at the Pivotal Labs hack day after GoGaRuCo 2010 to about 20 people, mostly ruby developers. In San Francisco, CA. 09/19/2010

It ran a little long, 15 to 20 minutes, but people told me to keep going. It was not recorded at all.

Hire me to punch up your slides, veganstraightedge@gmail.com / @veganstraightedge : twitter.

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,243
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
14
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide






































































  • Post GoGaRuco 2010 hack day at Pivotal Labs : HTML5 & CSS3

    1. 1. HTML5 CSS3
    2. 2. Shane Becker
    3. 3. @veganstraightedge
    4. 4. HTML5
    5. 5. <!DOCTYPE html>
    6. 6. <html lang="en">
    7. 7. <meta charset="utf-8" />
    8. 8. NEW ELEMENTS
    9. 9. <article>
    10. 10. <aside>
    11. 11. <audio>
    12. 12. <b>
    13. 13. <canvas>
    14. 14. <details>
    15. 15. <embed>
    16. 16. <footer>
    17. 17. <header>
    18. 18. <hgroup>
    19. 19. <i>
    20. 20. <mark>
    21. 21. <nav>
    22. 22. <progress>
    23. 23. <section>
    24. 24. <summary>
    25. 25. <time>
    26. 26. <video>
    27. 27. HTML5 FORMS
    28. 28. <input type=*>
    29. 29. type="email"
    30. 30. type="url"
    31. 31. type="tel"
    32. 32. type="search"
    33. 33. type="date"
    34. 34. type="datetime"
    35. 35. type="number"
    36. 36. type="range"
    37. 37. type="color"
    38. 38. placeholder
    39. 39. autofocus
    40. 40. HTML5 FRIENDS
    41. 41. geolocation
    42. 42. local storage
    43. 43. offline apps
    44. 44. web workers
    45. 45. web sockets
    46. 46. drag and drop
    47. 47. data-* attrs
    48. 48. Much more...
    49. 49. CSS3
    50. 50. border-radius
    51. 51. linear-gradient
    52. 52. radial-gradient
    53. 53. media queries
    54. 54. box-shadow
    55. 55. text-shadow
    56. 56. multiple backgrounds
    57. 57. border-image
    58. 58. @font-face
    59. 59. :before
    60. 60. :after
    61. 61. :first-child
    62. 62. :last-child
    63. 63. :nth-child( )
    64. 64. :nth-child(even)
    65. 65. :nth-child(odd)
    66. 66. :nth-child(10n-1)
    67. 67. img[alt=foo]
    68. 68. RGBa
    69. 69. OMG PUPPIES!

    ×