Download presentation
Presentation is loading. Please wait.
2
HTML5 & CSS3 A Practical Guide To
3
HTML5 New Elements Forms Semantics Javascript
4
CSS3 Selectors Properties Fonts
5
WHATWG TF?
6
WHYHTML5?
7
7 XHTML Head <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd http://www.w3.org/1999/xhtml
8
8 HTML5 Head
9
New Elements
10
10 New HTML5 Elements
11
11 New HTML5 Elements
12
12 New HTML5 Elements
13
13 New HTML5 Elements
15
15
16
16 Dontcom The home of Darren Wood
17
17
18
18 © Darren Wood 2010
19
19
20
20 Home About...
21
21
22
22 Blogroll Keith Amber Kim
23
23
24
24 Level 1 Level 2 Level 3
25
25
26
26 Blog Post Title Sub title Synergistically optimize flexible communities via cross-unit information. Objectively impact bricks-and-clicks catalysts forchange rather than reliable.
27
27
28
28
29
29
30
30 SEE VIDEO
31
Good Form
32
32 type=search email url tel range number date datetime datetime-local time month color
33
33 placeholder="enter something here“ Autofocus Required autocomplete="off"
34
Semantics
35
35 The most awesomest thing About Us Learn more about what we do
36
Javascript
37
37 Drag & Drop dragover dragenter drop dataTransfer
38
38 Canvas var canvas = document.getElementById("c"), context = canvas.getContext("2d"); context.fillRect(10, 20, 200, 100);
39
39 Get Elements by Class Name document.getElementsByClassName('test'); document.querySelectorAll('.testClass');
40
40 Client/Web Storage localStorage
41
41 Offline Application Cache
42
CSS3
43
Selectors
44
44 CSS3 selectors E[att^=”val”] E[att$=”val”] E[att*=”val”] E:root E:nth-child(n) E:nth-last-child(n) E:nth-of-type(n) E:nth-last-of-type(n) E:last-child E:first-of-type E:last-of-type E:only-child E:only-of-type E:empty E:target E:enabled E:disabled E:checked E::selection E:not(s) E ~ F
![44 CSS3 selectors E[att^= val ] E[att$= val ] E[att*= val ] E:root E:nth-child(n) E:nth-last-child(n) E:nth-of-type(n) E:nth-last-of-type(n) E:last-child E:first-of-type E:last-of-type E:only-child E:only-of-type E:empty E:target E:enabled E:disabled E:checked E::selection E:not(s) E ~ F](http://images.slideplayer.com./30/9527678/slides/slide_44.jpg "44 CSS3 selectors E[att^= val ] E[att$= val ] E[att*= val ] E:root E:nth-child(n) E:nth-last-child(n) E:nth-of-type(n) E:nth-last-of-type(n) E:last-child E:first-of-type E:last-of-type E:only-child E:only-of-type E:empty E:target E:enabled E:disabled E:checked E::selection E:not(s) E ~ F")
45
45 Substring matching attribute selector div[class^="nav"] { background:#ff0; } div[class$="nav"] { background:#ff0; } div[class*="nav"] { background:#ff0; }
![45 Substring matching attribute selector div[class^= nav ] { background:#ff0; } div[class$= nav ] { background:#ff0; } div[class*= nav ] { background:#ff0; }](http://images.slideplayer.com./30/9527678/slides/slide_45.jpg "45 Substring matching attribute selector div[class^= nav ] { background:#ff0; } div[class$= nav ] { background:#ff0; } div[class*= nav ] { background:#ff0; }")
46
46 The :nth-child() pseudo-class p:nth-child(3) { color:#f00; } li:nth-child(odd) { color: #eee; } li:nth-child(3n+10) {color: #eee; }
47
47 The :last-child pseudo-class li:last-child { border-bottom: 0; }
48
48 The :empty pseudo class p:empty { display: none; }
49
49 The ::selection pseudo class p::selected { background: #ff9; }
50
Properties
51
51 Vendor Prefixes -ms-border-radius: -moz-border-radius: -webkit-border-radius: -khtml-border-radius: -o-border-radius:
52
52 Colour & Opacity opacity: 0.8; opacity: 1; background-color: rgba(153,0,0,0.5); background-color: hsla(0,100,60,0.5);
53
53 Background & Borders background-size: 200px 30px;
54
54 Multiple Background Images background-image: url(img01.png) no-repeat, url(img02.png) no-repeat;
55
55 Border Image border-image: url(border.png) 0 10 0 10 stretch;
56
56 Border Radius border-radius: 10px; border-top-right-radius: 10px;
57
57 Text Overflow text-overflow: ellipse;
58
58 CSS Transforms #skew { transform:skew(35deg);} #scale { transform:scale(1,0.5);} #rotate { transform:rotate(45deg);} #rotate-skew-scale-translate { transform:skew(30deg) scale(1.1,1.1) rotate(40deg) }
59
59 CSS Animated Transforms img { position:absolute; left:0; transition: opacity 1s ease-in-out; } img:hover { opacity:0; }
60
Embedding Fonts
61
61 Font Face @font-face { font-family: 'Titillium Body'; src: url('Titillium.eot'); src: local(' ☺ '), url('Titillium.woff') format('woff'), url('Titillium.ttf') format('truetype'), url('Titillium.svg#webfont') format('svg'); }
62
62 http://typekit.com/ http://www.fontsquirrel.com/ http://code.google.com/webfonts
63
Making It Work
64
64
65
65 document.createElement('nav');
66
66
67
67.multiplebgs div p { /* properties for browsers which support multiple backgrounds */ }.no-multiplebgs div p { /* properties for browsers which don’t support multiple backgrounds */ }
68
68 if (!Modernizr.inputtypes.date) { createDatepicker(); }
69
LINKS AND RESOURCES
70
70 http://mediaelementjs.com/ http://css3pie.com/ http://css3please.com/ http://www.html5test.com/ http://www.html5rocks.com http://html5doctor.com/
71
Thanks! supreet.singh@microsoft.com microsoft.com/design microsoft.com/expression @surdyman
Similar presentations
