Your SlideShare is downloading. ×
HTML5 and CSS3 Refresher
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

HTML5 and CSS3 Refresher

1,391
views

Published on

HTML5 and CSS3 Refresher …

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
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,391
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
72
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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