•••
    –    –    –
•    –    –    –    –    –
–
••••••••••
•    –•    –•    –•    –
<!DOCTYPE html><html>  <head>     <title>Title</title>  </head>  <body>  …  </body></html>
••••••••••
•••
<header><footer><nav><section><article><aside>
http://bit.ly/JCnuQJ
<command><details><summary><meter><progress><figure><figcaption><mark><time><wbr>
data-getAttribute()
••••••••••

<input type="search"><input   type="number"><input   type="range"><input   type="color"><input   type="tel"><input   type=...
–          <input type="text“ autofocus>–    <input type="text“ placeholder=“your name”>
••••••••••
<audio><audio controls>    <source src="song.ogg" type="audio/ogg" />    <source src="song.mp3" type="audio/mpeg" />    No...
play() pause() load() currentTime ended    volume…
<video><video width="320" height="240" controls>    <source src="movie.mp4" type="video/mp4" />    <source src="movie.ogg"...
play() pause() load() currentTime ended    volume…
<video><iframe width="560" height="315"  src="http://www.youtube.com/embed/Wp20Sc8qPeo"  frameborder="0" allowfullscreen><...
••••••••••
••••••••••
function getLocation() {   if(navigator.geolocation) {       navigator.geolocation.getCurrentPosition(showPosition);   } e...
•••••••••••
••••••••••

••••
••••••••••
••••••••••
    
••
var worker = new Worker(“worker.js”);
$(„#button‟).click(function(event) {      $(„#output‟).html(“starting”);      worker.postMessage(“start”);});worker.onmess...
onmessage = function(event) {    if(event.data === “start”) {          var result;          // do something with result   ...
••••••••
–––––––
••••••••
selector {     property: value;     property2: value2, value3;     ...}
body {   background-color: red;}div {   background-color: green;}
h1, h2, h3 {   background-color: red;}
div {  list-style-image: url(image.png);  list-style-position: inside;  list-style-style: circle;}
div {  background:url(img.png), url(img2.png);  background-size:80px 60px;  background-repeat:no-repeat;  background-origi...
div {  background-color: blue;  background-color: rgba(0, 0, 255, 0.2);  background-color: hsla(240, 100%, 50%, 0.2);}
div {        background: -webkit-gradient(linear, right top, left                      bottom, from(red), green));}linear ...
p {  color: grey;  letter-spacing: 5px;  text-align: center;  text-decoration: underline;  text-indent: 10px;  text-transf...
p {  text-shadow: 2px 10px 5px #FF0000;  text-overflow: ellipsis;  word-wrap:break-word;}                         
••••••••
•    a { color: red; }•    #redLink { color: red; }•    redLink { color: red; }
•       •       •       •                      target•                           target=    "_blank“•               
•                            "https”•                           ".pdf”•                                          “mobil...
••••••••
div {  width: 100px;  height: 40px;  padding: 10px;  border: 5px solid gray;  margin: 10px;  border-radius: 10px;  box-sha...
div {  border-image:url(border.png) 30 30 round;}
••••••••
div {  display: none;}
block•inline••inline-block•   –
div.hidden {  visibility: hidden;}visible, collapse, inherit
box:••               box-orient#div {  display: box;  box-orient: horizontal;}
display: boxbox-orientbox-direction
box-pack           box-orient: horizontal;           box-pack: end;
box-align            box-orient: horizontal;            box-align: center;
             widthbox-flex           #box1 {           width: 100px;           }           #box2 {           box-flex: 1;...
•••••
••••••••
@font-face {  font-family: NAME;  src: url(Dimbo.ttf);  font-weight: normal;  font-style: normal;}
NAMEdiv {  font-family: NAME;}
••••••••
•    –        all•    –•    –•    –
.imageThumbnail {  width; 200px;  transition: all ease-in 3s;}.zoomed {  position: absolute;  left: 0px;  top: 0px;  width...
div {  animation: test 5s ease-in;}
 
@keyframes test{  0%   {background:   red; left:0px; top:0px;}  25% {background:    yellow; left:200px; top:0px;}  50% {ba...
•    –    –•    –    –•    –    –
••••••••
••••
•    <link rel=“stylesheet”         href=“style.css” media=“screen” />•    @media screen {         div { color: red; }    }
••••
@media screen and orientation: portrait
@media screen and (max-device-width: 480px){  /* your style */}
@media screen and (color),       handheld and (color) {    /* your style */}
@media not (width:480px) {  /* your style */}
@media only screen  and (min-device-width : 320px)  and (max-device-width : 480px) {      /* Styles */}
@media only screen and -webkit-min-device-pixel-ratio: 2@media only screen and  (device-width: 768px) and (orientation: la...
•    –    –•    –    –
•    –•    –•    –
•    –•
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
×

HTML5 and CSS3 Refresher

1,617

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

No Downloads
Views
Total Views
1,617
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
79
Comments
0
Likes
2
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. • –•
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×