HTML5 and CSS3 Refresher
Denunciar
Ivano MalavoltaSeguir
11 de Apr de 2013•0 recomendaciones•4,486 vistas
3 recomendaciones
Sé el primero en que te guste
ver más
vistas
Total de vistas
0
En Slideshare
0
De embebidos
0
Número de embebidos
0
Check these out next
HTML5 and CSS3 Refresher
11 de Apr de 2013•0 recomendaciones•4,486 vistas
3 recomendaciones
Sé el primero en que te guste
ver más
vistas
Total de vistas
0
En Slideshare
0
De embebidos
0
Número de embebidos
0
Descargar para leer sin conexión
Denunciar
Tecnología
Diseño
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
Ivano MalavoltaSeguir
HTML5 and CSS3 Refresher
- • • •
- – – –
- • – – – – –
- –
- • • • • • • • • • •
- • – • – • – • –
- <!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="url"> <input type="email"> <input type="date"> <input type="month"> <input type="week"> <input type="time"> <input type="datetime"> <input type="datetime-local">
- – <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" /> Not Supported </audio> sources
- play() pause() load() currentTime ended volume…
- <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
- play() pause() load() currentTime ended volume…
- <video> <iframe width="560" height="315" src="http://www.youtube.com/embed/Wp20Sc8qPeo" frameborder="0" allowfullscreen></iframe>
- • • • • • • • • • •
- • • • • • • • • • •
- 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); }
- • • • • • • • • • • •
- • • • • • • • • • •
-
- • • • •
- • • • • • • • • • •
- • • • • • • • • • •
-
- • •
- var worker = new Worker(“worker.js”);
- $(„#button‟).click(function(event) { $(„#output‟).html(“starting”); worker.postMessage(“start”); }); worker.onmessage = function(event) { $(„#output‟).html(event.data); }
- onmessage = function(event) { if(event.data === “start”) { var result; // do something with result postMessage(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-origin:content-box; }
- 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 right-top left-bottom from to
- p { color: grey; letter-spacing: 5px; text-align: center; text-decoration: underline; text-indent: 10px; text-transform: capitalize; word-spacing: 10px; }
- 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” • “mobile“ • • •
- • • • • • • • •
- div { width: 100px; height: 40px; padding: 10px; border: 5px solid gray; margin: 10px; border-radius: 10px; box-shadow: 10px 10px 5px red; }
- 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: box box-orient box-direction
- box-pack box-orient: horizontal; box-pack: end;
- box-align box-orient: horizontal; box-align: center;
- width box-flex #box1 { width: 100px; } #box2 { box-flex: 1; } #box3 { box-flex: 2; }
- • • • • •
- • • • • • • • •
- @font-face { font-family: NAME; src: url(Dimbo.ttf); font-weight: normal; font-style: normal; }
- NAME div { font-family: NAME; }
- • • • • • • • •
- • – all • – • – • –
- .imageThumbnail { width; 200px; transition: all ease-in 3s; } .zoomed { position: absolute; left: 0px; top: 0px; width: 480px; } $(„.imageThumbnail‟).addClass(„zoomed‟);
- div { animation: test 5s ease-in; }
-
- @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;} }
- • – – • – – • – –
- • • • • • • • •
- • • • •
- • <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: landscape) @media only screen and (min-device-width: 320px) and (max-device-width: 480px)
- • – – • – –
- • – • – • –
- • – •