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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5 and CSS3 Refresher

1,516

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

No Downloads
Views
Total Views
1,516
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
74
Comments
0
Likes
2
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. • –•

×