Arjan Burger
HTML5 / CSS3
Webinar
Alle informatie op
http://eduvision.info/html5
eduvision.info/html5
Vooraf
• Compatibaliteit
• Status Flash
• Javascript
• GO GO GO
eduvision.info/html5
NIEUW NIEUW HTML
• Basis indeling pagina
• Nieuwe tags
• Video tags
• Audio tags
• Canvas
eduvision.info/html5
Nieuwe tags
eduvision.info/html5
De traditionele indeling
eduvision.info/html5
Indeling 2.0
eduvision.info/html5
In html5
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8">
<title>HTML5</ti...
eduvision.info/html5
Formulieren: nieuwe
veldtypen
• Datetime
• Datetime-local
• Number
• Range
• Email
• Url
• Color
eduvision.info/html5
Video
<video src="mijnvideo.ogg" />
en met controls
<video src="mijnvideo.ogg" controls />
eduvision.info/html5
Audio
<audio src="mijnaudio.ogg"></audio>
<audio src="mijnaudio.ogg" autoplay controls
loop>
<a href=...
eduvision.info/html5
Canvas
<canvas id=“voorbeeld" width="200" height="200"></canvas>
eduvision.info/html5
Canvasrider.com
eduvision.info/html5
Storage
• localStorage – data opslag zonder tijdslimiet
• sessionStorage – opslag voor 1 sessie
eduvision.info/html5
NIEUW NIEUW CSS3
• Kleur
• Achtergronden
• Borders
• Tekst
• Transformatie (2d / 3d)
eduvision.info/html5
Kleuren: HSL
• HSL Kleuren (Hue, Saturation, Lightness)
• HSLA Kleuren (Hue, Saturation, Lightness,
A...
eduvision.info/html5
Kleuren: RGBA
• Alpha kanaal (Opacity)
eduvision.info/html5
Achtergronden
• Background-size
• Meerdere achtergronden (niet breed
ondersteund)
eduvision.info/html5
Borders
• Colored borders
• Border image
• Border radius (afgeronde borders)
• Box shadow
eduvision.info/html5
Tekst
• Text shadow
• Text overflow
• Word wrap (wel of niet afbreken woord)
• Extern lettertype inla...
eduvision.info/html5
Transformatie
• Rotate
• Scale
• Skew
• Translate
eduvision.info/html5
Rotate: 30 graden
eduvision.info/html5
Scale (transform)
eduvision.info/html5
Skew
eduvision.info/html5
Translate
eduvision.info/html5
Cursus HTML 5/CSS 3
• eduvision.info/html5-css3
• Alle nieuwe HTML
• Alle nieuwe CSS
eduvision.info/html5
Vragen?
• Twitter: twitter.com/eduvision
• Facebook: facebook.com/eduvision
• Linkedin: arjan-burger....
Upcoming SlideShare
Loading in...5
×

Webinar html5 css3

3,157

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

No notes for slide

Transcript of "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

×