HTML5 and CSS3 Refresher

2,881 views

Published on

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

Published in: Technology, Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,881
On SlideShare
0
From Embeds
0
Number of Embeds
229
Actions
Shares
0
Downloads
94
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

HTML5 and CSS3 Refresher

  1. 1. •••
  2. 2.  – – –
  3. 3. • – – – – –
  4. 4.
  5. 5. ••••••••••
  6. 6. • –• –• –• –
  7. 7. <!DOCTYPE html><html> <head> <title>Title</title> </head> <body> … </body></html>
  8. 8. ••••••••••
  9. 9. •••
  10. 10. <header><footer><nav><section><article><aside>
  11. 11. http://bit.ly/JCnuQJ
  12. 12. <command><details><summary><meter><progress><figure><figcaption><mark><time><wbr>
  13. 13. data-getAttribute()
  14. 14. ••••••••••
  15. 15.
  16. 16. <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">
  17. 17. – <input type="text“ autofocus>– <input type="text“ placeholder=“your name”>
  18. 18. ••••••••••
  19. 19. <audio><audio controls> <source src="song.ogg" type="audio/ogg" /> <source src="song.mp3" type="audio/mpeg" /> Not Supported</audio> sources 
  20. 20. play() pause() load() currentTime ended volume…
  21. 21. <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 
  22. 22. play() pause() load() currentTime ended volume…
  23. 23. <video><iframe width="560" height="315" src="http://www.youtube.com/embed/Wp20Sc8qPeo" frameborder="0" allowfullscreen></iframe>
  24. 24. ••••••••••
  25. 25. ••••••••••
  26. 26. 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);}
  27. 27. •••••••••••
  28. 28. ••••••••••
  29. 29. 
  30. 30. ••••
  31. 31. ••••••••••
  32. 32. ••••••••••
  33. 33.  
  34. 34. ••
  35. 35. var worker = new Worker(“worker.js”);
  36. 36. $(„#button‟).click(function(event) { $(„#output‟).html(“starting”); worker.postMessage(“start”);});worker.onmessage = function(event) { $(„#output‟).html(event.data);}
  37. 37. onmessage = function(event) { if(event.data === “start”) { var result; // do something with result postMessage(result); }}
  38. 38. ••••••••
  39. 39. –––––––
  40. 40. ••••••••
  41. 41. selector { property: value; property2: value2, value3; ...}
  42. 42. body { background-color: red;}div { background-color: green;}
  43. 43. h1, h2, h3 { background-color: red;}
  44. 44. div { list-style-image: url(image.png); list-style-position: inside; list-style-style: circle;}
  45. 45. div { background:url(img.png), url(img2.png); background-size:80px 60px; background-repeat:no-repeat; background-origin:content-box;}
  46. 46. div { background-color: blue; background-color: rgba(0, 0, 255, 0.2); background-color: hsla(240, 100%, 50%, 0.2);}
  47. 47. div { background: -webkit-gradient(linear, right top, left bottom, from(red), green));}linear right-top left-bottom from to 
  48. 48. p { color: grey; letter-spacing: 5px; text-align: center; text-decoration: underline; text-indent: 10px; text-transform: capitalize; word-spacing: 10px;}
  49. 49. p { text-shadow: 2px 10px 5px #FF0000; text-overflow: ellipsis; word-wrap:break-word;}    
  50. 50. ••••••••
  51. 51. • a { color: red; }• #redLink { color: red; }• redLink { color: red; }
  52. 52. • • • •  target•  target= "_blank“• 
  53. 53. •  "https”•  ".pdf”•  “mobile“• • • 
  54. 54. ••••••••
  55. 55. div { width: 100px; height: 40px; padding: 10px; border: 5px solid gray; margin: 10px; border-radius: 10px; box-shadow: 10px 10px 5px red;}
  56. 56. div { border-image:url(border.png) 30 30 round;}
  57. 57. ••••••••
  58. 58. div { display: none;}
  59. 59. block•inline••inline-block• –
  60. 60. div.hidden { visibility: hidden;}visible, collapse, inherit
  61. 61. box:•• box-orient#div { display: box; box-orient: horizontal;}
  62. 62. display: boxbox-orientbox-direction
  63. 63. box-pack box-orient: horizontal; box-pack: end;
  64. 64. box-align box-orient: horizontal; box-align: center;
  65. 65.  widthbox-flex #box1 { width: 100px; } #box2 { box-flex: 1; } #box3 { box-flex: 2; }
  66. 66. •••••
  67. 67. ••••••••
  68. 68. @font-face { font-family: NAME; src: url(Dimbo.ttf); font-weight: normal; font-style: normal;}
  69. 69. NAMEdiv { font-family: NAME;}
  70. 70. ••••••••
  71. 71. • – all• –• –• –
  72. 72. .imageThumbnail { width; 200px; transition: all ease-in 3s;}.zoomed { position: absolute; left: 0px; top: 0px; width: 480px;}$(„.imageThumbnail‟).addClass(„zoomed‟);
  73. 73. div { animation: test 5s ease-in;}
  74. 74.  
  75. 75. @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;}}
  76. 76. • – –• – –• – –
  77. 77. ••••••••
  78. 78. ••••
  79. 79. • <link rel=“stylesheet” href=“style.css” media=“screen” />• @media screen { div { color: red; } }
  80. 80. ••••
  81. 81. @media screen and orientation: portrait
  82. 82. @media screen and (max-device-width: 480px){ /* your style */}
  83. 83. @media screen and (color), handheld and (color) { /* your style */}
  84. 84. @media not (width:480px) { /* your style */}
  85. 85. @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */}
  86. 86. @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)
  87. 87. • – –• – –
  88. 88. • –• –• –
  89. 89. • –•

×