html5 and css3 refresher
Post on 20-Aug-2015
1.637 Views
Preview:
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: 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)
•
–
–
•
–
–
•
–
•
–
•
–
•
–
•
top related