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

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a HTML5 and CSS3 Refresher

Semelhante a HTML5 and CSS3 Refresher (20)

Mais de Ivano Malavolta

Mais de Ivano Malavolta (20)

Último

Último (20)

HTML5 and CSS3 Refresher