HTML5 and CSS3 Refresher

• • • • • • • • • •

• – • – • – • –

<!DOCTYPE html> <html> <head> <title>Title</title> </head> <body> … </body> </html>

– <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 

• • • • • • • • • • •

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; }

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)

HTML5 and CSS3 Refresher

More Related Content

What's hot

Viewers also liked

Similar to HTML5 and CSS3 Refresher

More from Ivano Malavolta

Recently uploaded

HTML5 and CSS3 Refresher