Weitere ähnliche Inhalte Mehr von Román Hernández (9) Novedades de Front-end 2016 (CSS3, HTML5 y APIs Javascript)5. > Algunas de las funciones que vas a ver,
son experimentales... ¡Debes activarlas!
7. > Block CSS
<div id="falcon">
<div id="luke"></div>
<div id="leia"></div>
<div id="solo"></div>
<div id="chewy"></div>
</div>
#falcon {
width:500px;
margin:6em auto;
min-height:100px;
background:#AAA;
display:block;
}
#falcon div {
width:75px;
height:50px;
margin:5px;
background:blue;
} CSS
HTML
8. > Flexbox CSS (hijos tamaño fijo)
<div id="falcon">
<div id="luke"></div>
<div id="leia"></div>
<div id="solo"></div>
<div id="chewy"></div>
</div>
#falcon {
width:500px;
margin:6em auto;
min-height:100px;
background:#AAA;
display:flex;
}
#falcon div {
width:75px;
height:50px;
margin:5px;
background:blue;
} CSS
HTML
9. > Flexbox CSS (altura flexible)
<div id="falcon">
<div id="luke"></div>
<div id="leia"></div>
<div id="solo"></div>
<div id="chewy"></div>
</div>
#falcon {
width:500px;
margin:6em auto;
min-height:100px;
background:#AAA;
display:flex;
}
#falcon div {
width:75px;
height:50px;
margin:5px;
background:blue;
} CSS
HTML
10. > Flexbox CSS (anchura flexible)
<div id="falcon">
<div id="luke"></div>
<div id="leia"></div>
<div id="solo"></div>
<div id="chewy"></div>
</div>
#falcon {
width:500px;
margin:6em auto;
min-height:100px;
background:#AAA;
display:flex;
}
#falcon div {
width:100%;
margin:5px;
background:blue;
}
CSS
HTML
Puedo
cambiar
el ancho
del padre
y los
hijos se
adaptan
11. > Flexbox CSS (centrar eje primario)
<div id="falcon">
<div id="luke"></div>
<div id="leia"></div>
<div id="solo"></div>
<div id="chewy"></div>
</div>
#falcon {
width:500px;
margin:6em auto;
min-height:100px;
background:#AAA;
display:flex;
justify-content:center;
}
#falcon div {
width:75px;
height:50px;
margin:5px;
background:blue;
} CSS
HTML
12. > Flexbox CSS (centrar eje secundario)
<div id="falcon">
<div id="luke"></div>
<div id="leia"></div>
<div id="solo"></div>
<div id="chewy"></div>
</div>
#falcon {
width:500px;
margin:6em auto;
min-height:100px;
background:#AAA;
display:flex;
justify-content:center;
align-items:center;
}
#falcon div {
width:75px;
height:50px;
margin:5px;
background:blue;
} CSS
HTML
13. > Star Wars CSS
<div id="falcon">
<div id="luke"></div>
<div id="leia"></div>
<div id="solo"></div>
<div id="chewy"></div>
</div>
div #luke {
background:linear-gradient(
#8b6e5a 25%, #f5e7e5 25%); }
div #leia {
background:linear-gradient(
#331f24 25%, #fff6e6 25%); }
div #solo {
background:linear-gradient(to left,
#190f17 25%, #f0dbd1 25%,75%,
#190f17 75%); }
div #chewy {
background:linear-gradient(-25deg,
#5e473c 50%, #f6f1f3 50%,55%,
#5e473c 55%); }
CSS
HTML
16. > Grid de elementos específicos
<div class="grid">
<div class="a">1</div>
<div class="b">2</div>
<div class="c">3</div>
<div class="d">4</div>
</div>
.grid {
display:grid;
grid-template-columns:
50px 100px 150px 200px;
}
.grid div {
background:grey;
color:white;
}
CSS
HTML
50px 100px 150px 200px
17. > Grid de elementos específicos
<div class="grid">
<div class="a">1</div>
<div class="b">2</div>
<div class="c">3</div>
<div class="d">4</div>
</div>
.grid {
display:grid;
grid-template-columns:
50px 200px;
}
.grid div {
background:grey;
color:white;
}
CSS
HTML
50px 200px
fila 1
fila 2
18. > Grid de elementos específicos
<div class="grid">
<div class="a">1</div>
<div class="b">2</div>
<div class="c">3</div>
<div class="d">4</div>
</div>
.grid {
display:grid;
grid-template-columns: 100px;
grid-template-rows:
50px 100px 50px;
}
.grid div {
background:grey;
color:white;
}
CSS
HTML
50px
50px
auto
100px
19. > Grid de elementos cíclicos
<div class="grid">
<div class="a">1</div>
<div class="b">2</div>
<div class="c">3</div>
<div class="d">4</div>
</div>
.grid {
display:grid;
grid-template-columns:
repeat(2, 200px 50px);
}
.grid div {
background:grey;
color:white;
}
CSS
HTML
50px200px 50px200px
20. > Grid automáticos (con hueco)
<div class="grid">
<div class="a">1</div>
<div class="b">2</div>
<div class="c">3</div>
<div class="d">4</div>
</div>
.grid {
display:grid;
grid-template-columns:200px 50px;
grid-auto-rows: 50px;
grid-gap: 25px 10px;
}
.grid div {
background:grey;
color:white;
}
CSS
HTML
50px200px
25px
50px
50px
10px
auto
rows
21. > Grid por áreas
<div class="grid">
<div class="a">1</div>
<div class="b">2</div>
<div class="c">3</div>
<div class="d">4</div>
</div>
.grid {
display:grid;
grid-auto-rows: 75px;
grid-template-areas: "head head"
"menu main"
"foot foot";
}
.a { grid-area:head; background:blue }
.b { grid-area:menu; background:red }
.c { grid-area:main; background:green }
.d { grid-area:foot; background:orange }
CSS
HTML
24. > Battery API
navigator.getBattery().then(
function(battery) {
console.log(battery.level); // 0..1
console.log(battery.charging); // true / false
battery.onlevelchange = function() {
// ha cambiado el nivel de carga
}
battery.onchargingchange = function() {
// se ha conectado/desconectado el dispositivo
}
}
);
JS
28. > Formas CSS
<img id="cat"
src="http://i.imgsafe.org/5ef91780a2.png" alt="Gato">
<p>El ronroneo suele ser signo de satisfacción. Algunos gatos
lo hacen simplemente para tratar de calmarse a sí mismos.</p>
p {
width:400px;
font-size:22px;
padding:20px;
}
CSS
HTML
#cat {
width:400px;
float:left;
}
30. > Formas CSS
#cat {
shape-outside: polygon(125px 0, 160px 100px, 248px 250px,
125px 250px);
}
34. > Máscaras CSS
<img id="cat"
src="http://i.imgsafe.org/5db73ca36b.jpg"
alt="Gato">
#cat {
border:5px solid green;
}
CSS
HTML
36. > Máscaras CSS
<img id="cat"
src="http://i.imgsafe.org/5db73ca36b.jpg"
alt="Gato">
#cat {
border:5px solid green;
clip-path: polygon(0 0, 100px 125px, 500px 125px, 0 600px);
}
CSS
HTML
37. > Máscaras CSS
#cat {
border:5px solid green;
clip-path: polygon(0 0, 100px 125px, 500px 125px, 0 600px);
}
CSS
42. Ventajas de HTTP/2
- Una sola conexión TCP
- Eliminación de redundancia/latencia
- Compresión de cabeceras
- Compatible con HTTP/1.1
49. > Variables CSS (Custom Prop)
<div id="box">A</div>
<div id="revbox">A</div>
#box, #revbox {
width:200px;
height:200px;
display:inline-flex;
flex-direction:column;
justify-content:center;
font-size:142px;
text-align:center;
}
CSS
HTML
51. #box {
background:var(--fondo); // no hay variable
color:var(--texto); // no hay variable
}
#revbox {
--fondo: steelblue;
background:var(--texto); // no hay variable
color:var(--fondo); // steelblue
border:1px solid var(--fondo); // steelblue
}
CSS
53. :root {
--fondo: red;
--texto: white;
}
#box {
background:var(--fondo); // red
color:var(--texto); // white
}
#revbox {
background:var(--texto); // white
color:var(--fondo); // red
border:1px solid var(--fondo); // red
}
CSS
57. var face = document.querySelector('#face');
anim = face.animate([
{ transform: 'translate(0, 0)', opacity: 1 },
{ transform: 'translate(20px, 5px)', opacity: .75 },
{ transform: 'translate(0, 0)', opacity: 1 }
], {
duration: 1000,
easing: 'ease',
iterations: 5,
direction: 'alternate',
});
anim.play();
JS
58. var face = document.querySelector('#face');
anim = face.animate([
{ transform: 'translate(0, 0)', opacity: 1 },
{ transform: 'translate(20px, 5px)', opacity: .75 },
{ transform: 'translate(0, 0)', opacity: 1 }
], {
duration: 1000,
easing: 'ease',
iterations: 5,
direction: 'alternate',
});
anim.play();
JS
anim.play();
anim.pause();
anim.cancel();
anim.finish();
anim.reverse();
anim.playbackRate++;