HTML5 and CSS3 Refresher
3 likes4,497 views
The document contains a large amount of HTML code, including elements such as headers, footers, navigation, articles, and multimedia sources like audio and video. It also includes JavaScript functions for geolocation and web worker processes, as well as CSS styling for various elements. Additionally, media queries are present for responsive design across different devices.
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. • – •