Presentation is loading. Please wait.

Presentation is loading. Please wait.

A Brief History of Time HTML5 CSS3 Tips A Brief History of Time.

Similar presentations


Presentation on theme: "A Brief History of Time HTML5 CSS3 Tips A Brief History of Time."— Presentation transcript:

1

2 A Brief History of Time HTML5 CSS3 Tips

3 A Brief History of Time

4 HTML HTML Tags HTML 1.0 Spec HTML 2.0 Spec HTML 3 voorstel verworpen HTML HTML 4.0

5 HTML HTML XHTML XHTML Web HTML5 voorstel XHTML 2.0 verworpen

6 HTML Working Draft Cadidate Recommendation Proposed Recommendation

7 CSS CSS CSS2 - Candidate Recommendation CSS2 - Proposed Recommendation CSS3 - Candidate Recommendation Media Queries Namespaces Selectors Level 3 Color

8 CSS CSS CSS2 - Candidate Recommendation CSS2 - Proposed Recommendation CSS3 - Candidate Recommendation Media Queries Namespaces Selectors Level 3 Color CSS4 - First Draft

9

10 HTML5 is een standaard, CSS3 en JavaScript zijn andere standaarden Om HTML5 tot z'n recht te laten komen moet je deze drie standaarden samen laten werken

11

12 HTML5 = Eenvoud function isValid Address( Address) { var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\- \/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\- \/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0- \uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e- \x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01- \x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0- \uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|- |\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900- \uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a- z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900- \uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i); return pattern.test( Address); };

13 HTML5 = Eenvoud

14 HTML5 = Eenvoud

15 HTML5 = Eenvoud

16 HTML5 = Eenvoud Demo Pagina Hello World!

17 HTML5 = Eenvoud Demo Pagina Hello World!

18 HTML5 = Eenvoud hello world! hello world!

19

20

21 Microdata format Avatar Director: James Cameron (born August 16, 1954 Science fiction Trailer

22 Microdata format Avatar Director: James Cameron (born August 16, 1954) Science fiction Trailer

23 Microdata format Avatar Director: James Cameron (born August 16, 1954 ) Science fiction Trailer

24 Demo time!

25 Microdata format schema.org

26

27 border-radius shadow transform media queries selectors level 3 color gradients multiple backgrounds CSS3

28 multi-columns border-images CSS3

29 CSS3 - Border-radius border-radius: 50px; border-top-left-radius: 50px 50px; border-top-right-radius: 100px 50px;

30 CSS3 - Shadows box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);

31 CSS3 - Color HSL / HSLa / RGB / RGBa waardes #FF0000 rgb(100%, 0%, 0%) rgb(255, 0, 0) rgba(255, 0, 0, 1) hsl(0, 100%, 50%) hsla(0, 100%, 50%, 1)

32 CSS3 - Media Queries div.wrapper { margin: 0 auto; width: 940px; padding: 0px 10px 0px 10px; only screen and (max-width: 940px) { div.wrapper { width: 748px; } handheld, only screen and (max-width: 750px) { div.wrapper { padding: 0; width: 480px; } only screen and (max-width: 460px) { div.wrapper { width: 300px; } }

33 Demo time!

34 CSS3 - Transform div { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* Firefox */ -webkit-transform:rotate(7deg); /* Safari and Chrome */ -o-transform:rotate(7deg); /* Opera */ }

35 Demo time!

36 CSS3 - Transition div { transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari and Chrome */ -o-transition: width 2s; /* Opera */ } div:hover { width:300px; }

37 Demo time!

38 :nth-child(10n-1) = 9,19,29,... :nth-child(odd) = (2n+1) :nth-child(even) = (2n+0) :nth-of-type() :nth-last-of-type() :first-child :last-child :first-of-type :last-of-type :empty CSS3 - Selectors L3 :root :target :enabled :disabled :checked :not() :lang()

39 Demo time!

40 Meer info?

41 Begin er zelf mee html5boilerplate.com

42 Vragen?


Download ppt "A Brief History of Time HTML5 CSS3 Tips A Brief History of Time."

Similar presentations


Ads by Google