HTML5 and CSS3 Refresher
•
3 likes•4,490 views
HTML5 and CSS3 Refresher This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2013. http://www.ivanomalavolta.com
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to HTML5 and CSS3 Refresher
Similar to HTML5 and CSS3 Refresher (20)
More from Ivano Malavolta
More from Ivano Malavolta (20)
Recently uploaded
Recently uploaded (20)
HTML5 and CSS3 Refresher
- 5. • • •
- 6. – – –
- 7. • – – – – –
- 8. –
- 13. • – • – • – • –
- 14. <!DOCTYPE html> <html> <head> <title>Title</title> </head> <body> … </body> </html>
- 16. • • •
- 24.
- 25. <input type="search"> <input type="number"> <input type="range"> <input type="color"> <input type="tel"> <input type="url"> <input type="email"> <input type="date"> <input type="month"> <input type="week"> <input type="time"> <input type="datetime"> <input type="datetime-local">
- 26. – <input type="text“ autofocus> – <input type="text“ placeholder=“your name”>
- 28. <audio> <audio controls> <source src="song.ogg" type="audio/ogg" /> <source src="song.mp3" type="audio/mpeg" /> Not Supported </audio> sources
- 30. play() pause() load() currentTime ended volume…
- 31. <video> <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> Not Supported </video> sources
- 33. play() pause() load() currentTime ended volume…
- 34. <video> <iframe width="560" height="315" src="http://www.youtube.com/embed/Wp20Sc8qPeo" frameborder="0" allowfullscreen></iframe>
- 41. function getLocation() { if(navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { console.log(„no geolocalization‟); } } function showPosition(position) { console.log(position.coords.latitude); console.log(position.coords.longitude); }
- 48.
- 49. • • • •
- 55.
- 56. • •
- 57. var worker = new Worker(“worker.js”);
- 58. $(„#button‟).click(function(event) { $(„#output‟).html(“starting”); worker.postMessage(“start”); }); worker.onmessage = function(event) { $(„#output‟).html(event.data); }
- 59. onmessage = function(event) { if(event.data === “start”) { var result; // do something with result postMessage(result); } }
- 61. • • • • • • • •
- 63. – – – – – – –
- 64. • • • • • • • •
- 65. selector { property: value; property2: value2, value3; ... }
- 66. body { background-color: red; } div { background-color: green; }
- 67. h1, h2, h3 { background-color: red; }
- 68. div { list-style-image: url(image.png); list-style-position: inside; list-style-style: circle; }
- 69. div { background:url(img.png), url(img2.png); background-size:80px 60px; background-repeat:no-repeat; background-origin:content-box; }
- 70. div { background-color: blue; background-color: rgba(0, 0, 255, 0.2); background-color: hsla(240, 100%, 50%, 0.2); }
- 71. div { background: -webkit-gradient(linear, right top, left bottom, from(red), green)); } linear right-top left-bottom from to
- 72. p { color: grey; letter-spacing: 5px; text-align: center; text-decoration: underline; text-indent: 10px; text-transform: capitalize; word-spacing: 10px; }
- 73. p { text-shadow: 2px 10px 5px #FF0000; text-overflow: ellipsis; word-wrap:break-word; }
- 75. • • • • • • • •
- 76. • a { color: red; } • #redLink { color: red; } • redLink { color: red; }
- 77. • • • • target • target= "_blank“ •
- 78. • "https” • ".pdf” • “mobile“ • • •
- 79. • • • • • • • •
- 81. div { width: 100px; height: 40px; padding: 10px; border: 5px solid gray; margin: 10px; border-radius: 10px; box-shadow: 10px 10px 5px red; }
- 82. div { border-image:url(border.png) 30 30 round; }
- 83. • • • • • • • •
- 84. div { display: none; }
- 86. div.hidden { visibility: hidden; } visible, collapse, inherit
- 87. box: • • box-orient #div { display: box; box-orient: horizontal; }
- 89. box-pack box-orient: horizontal; box-pack: end;
- 90. box-align box-orient: horizontal; box-align: center;
- 91. width box-flex #box1 { width: 100px; } #box2 { box-flex: 1; } #box3 { box-flex: 2; }
- 92. • • • • •
- 99. • • • • • • • •
- 100. @font-face { font-family: NAME; src: url(Dimbo.ttf); font-weight: normal; font-style: normal; }
- 101. NAME div { font-family: NAME; }
- 103. • • • • • • • •
- 109. • – all • – • – • –
- 110. .imageThumbnail { width; 200px; transition: all ease-in 3s; } .zoomed { position: absolute; left: 0px; top: 0px; width: 480px; } $(„.imageThumbnail‟).addClass(„zoomed‟);
- 111. div { animation: test 5s ease-in; }
- 112.
- 113. @keyframes test{ 0% {background: red; left:0px; top:0px;} 25% {background: yellow; left:200px; top:0px;} 50% {background: blue; left:200px; top:200px;} 75% {background: green; left:0px; top:200px;} 100% {background: red; left:0px; top:0px;} }
- 115. • – – • – – • – –
- 116. • • • • • • • •
- 117. • • • •
- 118. • <link rel=“stylesheet” href=“style.css” media=“screen” /> • @media screen { div { color: red; } }
- 119. • • • •
- 121. @media screen and orientation: portrait
- 123. @media screen and (max-device-width: 480px){ /* your style */ }
- 124. @media screen and (color), handheld and (color) { /* your style */ }
- 125. @media not (width:480px) { /* your style */ }
- 126. @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ }
- 127. @media only screen and -webkit-min-device-pixel-ratio: 2 @media only screen and (device-width: 768px) and (orientation: landscape) @media only screen and (min-device-width: 320px) and (max-device-width: 480px)
- 129. • – – • – –
- 130. • – • – • –
- 131. • – •