HTML5 and CSS3 Refresher





–
–
–

•
–
–
–
–

–

•
•
•
•
•
•
•
•
•
•

•
–
•
–
•
–
•
–

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

http://bit.ly/JCnuQJ

–

<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-pack: end;

box-align

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

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to HTML5 and CSS3 Refresher (20)

More from Ivano Malavolta (20)

Recently uploaded (20)

HTML5 and CSS3 Refresher