HTML5 and CSS3 Refresher
Upcoming SlideShare
Loading in...5
×
 

HTML5 and CSS3 Refresher

on

  • 1,497 views

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

Statistics

Views

Total Views
1,497
Views on SlideShare
1,315
Embed Views
182

Actions

Likes
1
Downloads
63
Comments
0

2 Embeds 182

http://www.ivanomalavolta.com 181
https://www.google.co.uk 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    HTML5 and CSS3 Refresher HTML5 and CSS3 Refresher Presentation Transcript

    • •••
    •  – – –
    • • – – – – –
    • ••••••••••
    • • –• –• –• –
    • <!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: 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; } #box3 { box-flex: 2; }
    • •••••
    • ••••••••
    • @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: 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)
    • • – –• – –
    • • –• –• –
    • • –•