Webinar html5 css3

3,472 views
3,301 views

Published on

Snel op de hoogte van alle mogelijkheden van HTML 5 / CSS 3. Onze cursus volgen? http://eduvision.info/html5-css3

Published in: Education, Technology, Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,472
On SlideShare
0
From Embeds
0
Number of Embeds
380
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Webinar html5 css3

  1. 1. Arjan Burger HTML5 / CSS3 Webinar Alle informatie op http://eduvision.info/html5
  2. 2. eduvision.info/html5 Vooraf • Compatibaliteit • Status Flash • Javascript • GO GO GO
  3. 3. eduvision.info/html5 NIEUW NIEUW HTML • Basis indeling pagina • Nieuwe tags • Video tags • Audio tags • Canvas
  4. 4. eduvision.info/html5 Nieuwe tags
  5. 5. eduvision.info/html5 De traditionele indeling
  6. 6. eduvision.info/html5 Indeling 2.0
  7. 7. eduvision.info/html5 In html5 <!DOCTYPE html> <html dir="ltr" lang="en-US"> <head> <meta charset="utf-8"> <title>HTML5</title> </head> <body> <header> <nav></nav> </header> <section> <article> <header></header> <figure></figure> <footer></footer> <dialog><dialog> </article> <aside></aside> </section> <footer></footer> </body> </html>
  8. 8. eduvision.info/html5 Formulieren: nieuwe veldtypen • Datetime • Datetime-local • Number • Range • Email • Url • Color
  9. 9. eduvision.info/html5 Video <video src="mijnvideo.ogg" /> en met controls <video src="mijnvideo.ogg" controls />
  10. 10. eduvision.info/html5 Audio <audio src="mijnaudio.ogg"></audio> <audio src="mijnaudio.ogg" autoplay controls loop> <a href="mijnaudio.ogg">download</a> </audio>
  11. 11. eduvision.info/html5 Canvas <canvas id=“voorbeeld" width="200" height="200"></canvas>
  12. 12. eduvision.info/html5 Canvasrider.com
  13. 13. eduvision.info/html5 Storage • localStorage – data opslag zonder tijdslimiet • sessionStorage – opslag voor 1 sessie
  14. 14. eduvision.info/html5 NIEUW NIEUW CSS3 • Kleur • Achtergronden • Borders • Tekst • Transformatie (2d / 3d)
  15. 15. eduvision.info/html5 Kleuren: HSL • HSL Kleuren (Hue, Saturation, Lightness) • HSLA Kleuren (Hue, Saturation, Lightness, Alpha) • +A = Opacity
  16. 16. eduvision.info/html5 Kleuren: RGBA • Alpha kanaal (Opacity)
  17. 17. eduvision.info/html5 Achtergronden • Background-size • Meerdere achtergronden (niet breed ondersteund)
  18. 18. eduvision.info/html5 Borders • Colored borders • Border image • Border radius (afgeronde borders) • Box shadow
  19. 19. eduvision.info/html5 Tekst • Text shadow • Text overflow • Word wrap (wel of niet afbreken woord) • Extern lettertype inladen (@font-face)
  20. 20. eduvision.info/html5 Transformatie • Rotate • Scale • Skew • Translate
  21. 21. eduvision.info/html5 Rotate: 30 graden
  22. 22. eduvision.info/html5 Scale (transform)
  23. 23. eduvision.info/html5 Skew
  24. 24. eduvision.info/html5 Translate
  25. 25. eduvision.info/html5 Cursus HTML 5/CSS 3 • eduvision.info/html5-css3 • Alle nieuwe HTML • Alle nieuwe CSS
  26. 26. eduvision.info/html5 Vragen? • Twitter: twitter.com/eduvision • Facebook: facebook.com/eduvision • Linkedin: arjan-burger.nl • Facebook: fb.arjan-burger.nl • Later vragen? Bel of mail ons! • +31 (0)55 576 80 44 • +32 (0)3 747 03 10 • info@eduvision.nl/info@eduvision.be

×