Your SlideShare is downloading. ×

Webinar html5 css3

3,114

Published on

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

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,114
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Arjan Burger HTML5 / CSS3 Webinar Alle informatie op http://eduvision.info/html5
  • 2. eduvision.info/html5 Vooraf • Compatibaliteit • Status Flash • Javascript • GO GO GO
  • 3. eduvision.info/html5 NIEUW NIEUW HTML • Basis indeling pagina • Nieuwe tags • Video tags • Audio tags • Canvas
  • 4. eduvision.info/html5 Nieuwe tags
  • 5. eduvision.info/html5 De traditionele indeling
  • 6. eduvision.info/html5 Indeling 2.0
  • 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. eduvision.info/html5 Formulieren: nieuwe veldtypen • Datetime • Datetime-local • Number • Range • Email • Url • Color
  • 9. eduvision.info/html5 Video <video src="mijnvideo.ogg" /> en met controls <video src="mijnvideo.ogg" controls />
  • 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. eduvision.info/html5 Canvas <canvas id=“voorbeeld" width="200" height="200"></canvas>
  • 12. eduvision.info/html5 Canvasrider.com
  • 13. eduvision.info/html5 Storage • localStorage – data opslag zonder tijdslimiet • sessionStorage – opslag voor 1 sessie
  • 14. eduvision.info/html5 NIEUW NIEUW CSS3 • Kleur • Achtergronden • Borders • Tekst • Transformatie (2d / 3d)
  • 15. eduvision.info/html5 Kleuren: HSL • HSL Kleuren (Hue, Saturation, Lightness) • HSLA Kleuren (Hue, Saturation, Lightness, Alpha) • +A = Opacity
  • 16. eduvision.info/html5 Kleuren: RGBA • Alpha kanaal (Opacity)
  • 17. eduvision.info/html5 Achtergronden • Background-size • Meerdere achtergronden (niet breed ondersteund)
  • 18. eduvision.info/html5 Borders • Colored borders • Border image • Border radius (afgeronde borders) • Box shadow
  • 19. eduvision.info/html5 Tekst • Text shadow • Text overflow • Word wrap (wel of niet afbreken woord) • Extern lettertype inladen (@font-face)
  • 20. eduvision.info/html5 Transformatie • Rotate • Scale • Skew • Translate
  • 21. eduvision.info/html5 Rotate: 30 graden
  • 22. eduvision.info/html5 Scale (transform)
  • 23. eduvision.info/html5 Skew
  • 24. eduvision.info/html5 Translate
  • 25. eduvision.info/html5 Cursus HTML 5/CSS 3 • eduvision.info/html5-css3 • Alle nieuwe HTML • Alle nieuwe CSS
  • 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

×