CSS Fútbol

Título: CSS Fútbol
Tema: CSS, PostCSS & WebComponents
Evento: TLP Tenerife 2019 ( https://tlp-tenerife.com/ )
Lugar: Recinto ferial de Santa Cruz de Tenerife (Sala IBM)
--------------------
Descripción: ¿Recuerdas o viviste la época de los primeros «PC-Fútbol»? En un ataque de nostalgia, he preparado una charla en la que explicaré paso a paso como hacer una demo visual de un campo de fútbol para representar alineaciones de un equipo, utilizando tecnologías como HTML5, CSS3, Javascript, PostCSS y WebComponents. Sin frameworks. Sin imágenes (o casi).

GitHub: https://github.com/ManzDev/css-futbol

Transcript

1. José Román Hdez @Manz
2. Autor y creador Director y profesor Plataformas de documentación Mentor, profesor y colaborador
3. no , no es el
4. <div class="field"></div>
5. .field { width: 850px; height: 425px; margin: auto; background: green; border: 4px solid white; }
6. .field { --field-width: 850px; --field-height: 425px; width: var(--field-width); height: var(--field-height); ... } calc(var(--field-width)/2); de d --fiel -wi h
7. :root { background: black; height: 100%; display: flex; justify-content: center; align-items: center; } <h l> eq a n (mo p ifi t ) Ali -it Jus y-co n
8. <div class="field"> <div class="left zone"></div> <div class="middle zone"></div> <div class="right zone"></div> </div> .left .middle .right .zone .zone .zone
9. .field { ... display: flex; justify-content: space-between; align-items: center; } space-between .left .middle .right
10. <div class="left zone"> <div class="area"></div> </div> .left
11. .zone { display: flex; height: 100%; align-items: center; & .area { width: 166px; height: 250px; border: 4px solid white; border-left: 0; } } .left .zone 166px 250px
12. /2 /6 --field-width --field-height
13. .zone { ... & .area { --area-width: 166px; --area-height: 250px; width: var(--area-width); height: var(--area-height); ... } } .left .zone calc(var(--field-width)/6); calc(var(--field-height)/2);
14. flex & a r/be Smal are ...
15. <div class="left zone"> <div class="area"> <div class="smallarea"></div> </div> </div>
16. .area { ... display: flex; align-items: center; & .smallarea { width: 40%; height: 60%; border: 4px solid white; border-left: 0; } } .left .zone 40% 60%
17. <div class="area"> ::before Texto ::after </div> .area::before { content: "Hola"; } .area::after { content: "Adiós"; } HolaTextoAdiós
18. <div class="left zone"> <div class="area"> ::before <div class="smallarea"></div> ::after </div> </div> pe t po ar a
19. .area { ... position: relative; &::before { content: ""; border: 2px solid white; border-radius: 50%; width: 4%; height: 3%; position: absolute; left: 67%; } } .left .zone
20. .area { ... position: relative; &::after { content: ""; border: 4px solid white; border-radius: 50%; width: 100%; height: 60%; position: absolute; left: 17%; } } .left .zone
21. .area { ... &::after { ... clip-path: polygon(100% 0, 80% 0, 80% 100%, 100% 100%); } } .left .zone
22. <div class="left zone"> <div class="area"> <div class="goal"></div> <div class="smallarea"></div> </div> </div>
23. .goal { border: 4px solid white; border-right: 0; width: 10%; height: 35%; position: absolute; left: -14%; } .left .zone
24. po on & c i -pa Corner ...
25. <div class="left zone"> <div class="top corner"></div> <div class="area"> <div class="goal"></div> <div class="smallarea"></div> </div> <div class="bottom corner"></div> </div>
26. .zone { position: relative; & .corner { border: 4px solid white; border-radius: 50%; width: 15%; height: 5%; position: absolute; left: -10%; } } .left .zone
27. .zone { position: relative; & .corner { ... clip-path: polygon( 100% 50%, 100% 100%, 50% 100%, 50% 50%); } } .left .zone
28. .zone { ... & .corner { ... &.top { top: -3%; } &.bottom { bottom: -3%; transform: scaleY(-1); } } } .left .zone
29. mi r & p e -el t Enem are ...
30. <div class="right zone"> <div class="top corner"></div> <div class="area"> <div class="goal"></div> <div class="smallarea"></div> </div> <div class="bottom corner"></div> </div> .left .middle .right .zone .zone .zone
31. .zone { ... &.right { transform: scaleX(-1); } } .right .zone
32. <div class="middle zone"> ::before ::after </div> .middle .zone .middle { border-left: 4px solid white; width: 0; } ci l s o
33. .middle .zone .middle::before { content: ""; border: 4px solid white; border-radius: 50%; width: calc(var(--field-width)/0.15); height: calc(var(--field-width)/0.15); position: absolute; transform: translateX(-51%); }
34. .middle .zone .middle::after { content: ""; border: 2px solid white; border-radius: 50%; width: 8px; height: 8px; position: absolute; transform: translateX(-65%); } id y, --s o -wi h
35. ba g d ad s Gras ...
36. .field.normal { background-image: linear-gradient(160deg, transparent, rgba(0, 0, 0, 0.65)), repeating-linear-gradient(to left, green 0, darkgreen 60px, green 180px); } 0 60px 180px 160deg
37. .field.classic { background-image: repeating-linear-gradient(to left, #066606 0 60px, #044d04 60px 120px); }
38. .field.mosaic { background-image: repeating-linear-gradient(to bottom, #0002 0 80px, transparent 80px 140px), repeating-linear-gradient(to left, #044d04 0 80px, #066606 80px 140px); }
39. .field.dry { background-image: linear-gradient(160deg, transparent, rgba(0, 0, 0, 0.45)), repeating-linear-gradient(300deg, #7a6b25 0, #5f501e 60px, #805d29 1200px); } 160deg
40. .field.circle { background-image: linear-gradient(160deg, transparent, rgba(0, 0, 0, 0.45)), repeating-radial-gradient(circle, #097709 0 60px, #076107 60px 140px); }
41. c t a s m Player
42. <div class="field"> ... <div class="playable"></div> </div> .playable .field { position: relative; & .playable { position: absolute; width: 100%; height: 100%; } }
43. <div class="playable"> <div class="player p1" data-number="1"></div> <div class="player p2" data-number="2"></div> ... <div class="player p11" data-number="11"></div> </div> .player.p$[data-number="$"]*11
44. .player .player { --player-width: calc(var(--field-width)/15); width: var(--player-width); height: var(--player-width); background: grey; border: 4px solid white; border-radius: 50%; box-shadow: 4px 4px 14px rgba(0, 0, 0, 0.5) inset, 4px 4px 10px rgba(0, 0, 0, 0.5); }
45. .numbers .player::before { content: attr(data-number); font-family: Montserrat, sans-serif; font-weight: 700; font-size: calc(var(--player-width) / 2); display: flex; justify-content: center; } .player 2 <div class="playable numbers"> ... </div>
46. .tenerife .player { background: #000 linear-gradient( #fff 60%, #00f 60%, #00f5 90%); } .barça .player { background: linear-gradient(to bottom, transparent 0% 60%, #0a2455 60%), repeating-linear-gradient(to right, #1d3b71 0% 20%, #8f1d2a 20% 40%); &::before { color: yellow; } } 2 <div class="playable numbers tenerife"></div> #fff #00f #00f5
47. .realmadrid .player { background: #fff linear-gradient(to bottom, #fff 60%, #000 60% 61%, #fff 64%); } .spain .player { background: linear-gradient(to bottom, transparent 0% 60%, #035781 60%), linear-gradient(to right, #f31f2d 5% 10%, #eebe4f 10% 16%, #84485f 16% 22%, #f31f2d 22% 40%); &::before { color: yellow; } } 2 <div class="playable numbers spain"></div>
48. .atleti .player { background: linear-gradient(to bottom, transparent 0% 60%, #202669 60%), linear-gradient(to right, #a40f23 0% 20%, #fff 20% 40%); &::before { text-shadow: 0 0 4px #fff; } } .player.goalkeeper { background: linear-gradient( #111 60%, #888 60%); &::before { color: #eee; } } <div class="player p1 goalkeeper"></div>
49. flex & g i Formatio
50. [data-formation] /* Default formation */ .playable { display: flex; justify-content: center; align-items: center; & .player { margin: 5px; } }
51. [preparing-grid] [data-formation] { display: grid; justify-content: space-around; align-items: center; } .p1 { grid-area: a; } .p2 { grid-area: b; } ... .p10 { grid-area: j; } .p11 { grid-area: k; }
52. [data-formation] [data-formation="1-2-6-2"] { grid-template-areas: ". . d g ." ". b . . j" "a . e h ." ". c . . k" ". . f i ."; }
53. [data-formation] [data-formation="1-3-4-3"] { grid-template-areas: ". b . . i" ". . e g ." "a c . . j" ". . f h ." ". d . . k"; }
54. [data-formation] [data-formation="1-5-2-3"] { grid-template-areas: ". b . . i" ". c . . ." "a d g h j" ". e . . ." ". f . . k"; }
55. [data-formation] [data-formation="1-3-2-5"] { grid-template-areas: ". b . . g" ". . e . h" "a c . . i" ". . f . j" ". d . . k"; }
56. [data-formation] [data-formation="1-5-5-def"] { grid-template-areas: ". b . g" ". c . h" "a d . i" ". e . j" ". f . k"; grid-template-columns: repeat(7, 1fr); }
57. Dem time
58. t a s m & pe p ve 3D
59. <div id="app"> <div class="field"> <div class="left zone">...</div> <div class="middle zone"></div> <div class="right zone">...</div> <div class="playable">...</div> </div> </div> añadimos un contenedor
60. rotateY rotateX rotateZ perspective + value far user - value near user user (point view)
61. .field { --field-rotate-x: 0deg; --field-scale: 1; transform: rotateX(var(--field-rotate-x)) scale(var(--field-scale)); } body { overflow: hidden; } #app { perspective: 150px; perspective-origin: bottom; }
62. const field = { rx: 0 } domfield.addEventListener('wheel', function(event) { field.rx += event.deltaY > 0 ? 0.25 : -0.25; domfield.style.setProperty('--field-rotate-x', `${field.rx}deg`); }
63. .field (good!) .player (baaad!)
64. field rotateX player rotateX = player translateZ field scale shift 0 20 field rotateX *-1 --field-scale --field-rotate-x --player-translate-z
65. .field { ... --player-rotate-x: 0deg; ... } .field, .playable { transform-style: preserve-3d; } .player { transform: rotateX(calc(var(--field-rotate-x) * -1)); }
66. domfield.addEventListener('wheel', function(event) { ... { field.rx += event.deltaY > 0 ? 0.25 : -0.25; player.z += event.deltaY > 0 ? 0.5 : -0.5; } domfield.style.setProperty( '--player-translate-z', `${player.z}px`); } const player = { z: 0 }
67. .field (good!) .player (good!!)
68. .field { ... transition: transform 0.2s linear; will-change: transform; } .player { ... transition: transform 0.25s linear; will-change: transform; }
69. un & me u r e Responsiv
70. @media screen and (700px <= width <= 1100px) { } > 1100px < 1100px
71. @media screen and (700px <= width <= 1100px) { #app { & .field { --field-width: 700px; --field-rotate-z: -90deg; } } } 700px - 1100px
72. @media screen and (700px <= width <= 1100px) { #app { & .field { ... } & .player { transform: rotateZ(90deg); } } }
73. .player { transition: all 0.75s; } .field { transition: all 0.25s; } @media screen and (700px <= width <= 1100px) { ... } } transform will-change: transform;
74. @media screen and (width <= 700px) { .field { --field-width: 400px; --field-height: 250px; } } <= 900px
75. .field { --field-width: 70vw; } 100vw (viewport width)
76. we m en Energ
77. WebComponents <your-tag></your-tag>
78. <div class="field"> <div class="left zone"></div> <div class="top corner"></div> <div class="area"> <div class="goal"></div> <div class="smallarea"></div> </div> <div class="bottom corner"></div> </div> <div class="middle zone"></div> <div class="right zone"> ... </div> </div> <field-area class="left"></field-area> ... <div class="player p5" data-number="5"></div> <div class="player p6" data-number="6"></div> ... <team-player number="6"></team-player>
79. class TeamPlayer extends HTMLElement { constructor () { super(); ... this.innerHTML = 'Contenido'; } } customElements.define('team-player', TeamPlayer); <team-player>Contenido</team-player>
80. class TeamPlayer extends HTMLElement { constructor () { super(); this.number = parseInt(this.getAttribute('number')); this.dataset.number = this.number; this.classList.add('player', `p${this.number}`); ... } } customElements.define('team-player', TeamPlayer); <team-player number="6"></team-player> 6 p o s at b e
81. class TeamPlayer extends HTMLElement { constructor () { ... this.innerHTML = ` <div class="attrs"> <div class="life"> <div class="fill"></div> </div> </div>`; ... } } 6 .attrs .fill .life
82. .attrs { position: absolute; width: var(--player-width); transform: translateY(-52px); color: white; user-select: none; pointer-events: none; }
83. .player { --player-energy: 100; --player-energy-color: yellow; } 100 0 50
84. .attrs { & .life { width: 100%; height: 10px; background: #000; box-shadow: 0 0 10px rgba(0,0,0, 0.5); border-radius: 10px; overflow: hidden; & .fill { background: var(--player-energy-color); height: 100%; transition: width 0.5s ease; } } } .life .fill
85. .attrs { opacity: 0; transition: opacity 0.5s ease 0.15s; & .fill { width: 0; } } .player:hover .attrs { opacity: 1; transition: opacity 0.5s ease 0; & .fill { width: var(--player-energy); } } width: 0; width: var(--player-energy);
86. class TeamPlayer extends HTMLElement { constructor () { ... this.style.setProperty( '--player-energy', `${this.energy}%` ); this.style.setProperty( '--player-energy-color', getEnergyColor(this.energy) ); ... } }
87. s e hS t e s Commentator
88. const ENGINE = 5; class Commentator { constructor () { speechSynthesis.addEventListener('voiceschanged', () => { this.voiceEngine = speechSynthesis.getVoices()[ENGINE]; }); } speak (text) { const utterance = new SpeechSynthesisUtterance(text); utterance.lang = 'en'; utterance.voice = this.voiceEngine || null; speechSynthesis.speak(utterance); } }
89. s a w DO Stadiu Bil Boar
92. Web ne <stadium-billboard></stadium-billboard> Lig O Sha DO Glo C
93. class StadiumBillboard extends HTMLElement { constructor () { super(); ... this.innerHTML = ` <style> stadium-billboard { border: 2px solid white; } </style> <div class="left panel"></div> <div class="right panel"></div>`; } } <stadium-billboard></stadium-billboard> Glo C & H L (no l "wa " )
94. class StadiumBillboard extends HTMLElement { constructor () { super(); … this.attachShadow({ mode: 'open' }); this.shadowRoot.innerHTML = ` <style> :host { border: 2px solid white; } </style> <div class="left panel"></div> <div class="right panel"></div>`; } } Loc S & H L (s a w "wa ")
95. stadium-billboard { border: 2px solid white; } Web ne stadium-billboard { border: 4px solid red; & .left.panel { border: 4px solid blue; } } Glo C <stadium-billboard></stadium-billboard>
96. Web ne Lig O <stadium-billboard></stadium-billboard> Sha DO Glo C .left.panel .right.panel --custom-prop
100. ¡Gracias! José Román Hdez @Manz