CSS Fútbol - Speaker Deck

Slide 1

Slide 1 text

José Román Hdez @Manz

Slide 2

Slide 2 text

Autor y creador Director y profesor Plataformas de documentación Mentor, profesor y colaborador

Slide 3

Slide 3 text

no , no es el

Slide 4

Slide 4 text

Slide 5

Slide 5 text

.field { width: 850px; height: 425px; margin: auto; background: green; border: 4px solid white; }

Slide 6

Slide 6 text

.field { --field-width: 850px; --field-height: 425px; width: var(--field-width); height: var(--field-height); ... } calc(var(--field-width)/2); de d --ﬁel -wi h

Slide 7

Slide 7 text

:root { background: black; height: 100%; display: flex; justify-content: center; align-items: center; } eq a n (mo p iﬁ t ) Ali -it Jus y-co n

Slide 8

Slide 8 text

.left .middle .right .zone .zone .zone

Slide 9

Slide 9 text

.field { ... display: flex; justify-content: space-between; align-items: center; } space-between .left .middle .right

Slide 10

Slide 10 text

.left

Slide 11

Slide 11 text

.zone { display: flex; height: 100%; align-items: center; & .area { width: 166px; height: 250px; border: 4px solid white; border-left: 0; } } .left .zone 166px 250px

Slide 12

Slide 12 text

/2 /6 --field-width --field-height

Slide 13

Slide 13 text

.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);

Slide 14

Slide 14 text

ﬂex & a r/be Smal are ...

Slide 15

Slide 15 text

Slide 16

Slide 16 text

.area { ... display: flex; align-items: center; & .smallarea { width: 40%; height: 60%; border: 4px solid white; border-left: 0; } } .left .zone 40% 60%

Slide 17

Slide 17 text

::before Texto ::after

.area::before { content: "Hola"; } .area::after { content: "Adiós"; } HolaTextoAdiós

Slide 18

Slide 18 text

::before

::after

pe t po ar a

Slide 19

Slide 19 text

.area { ... position: relative; &::before { content: ""; border: 2px solid white; border-radius: 50%; width: 4%; height: 3%; position: absolute; left: 67%; } } .left .zone

Slide 20

Slide 20 text

.area { ... position: relative; &::after { content: ""; border: 4px solid white; border-radius: 50%; width: 100%; height: 60%; position: absolute; left: 17%; } } .left .zone

Slide 21

Slide 21 text

.area { ... &::after { ... clip-path: polygon(100% 0, 80% 0, 80% 100%, 100% 100%); } } .left .zone

Slide 22

Slide 22 text

Slide 23

Slide 23 text

.goal { border: 4px solid white; border-right: 0; width: 10%; height: 35%; position: absolute; left: -14%; } .left .zone

Slide 24

Slide 24 text

po on & c i -pa Corner ...

Slide 25

Slide 25 text

Slide 26

Slide 26 text

.zone { position: relative; & .corner { border: 4px solid white; border-radius: 50%; width: 15%; height: 5%; position: absolute; left: -10%; } } .left .zone

Slide 27

Slide 27 text

.zone { position: relative; & .corner { ... clip-path: polygon( 100% 50%, 100% 100%, 50% 100%, 50% 50%); } } .left .zone

Slide 28

Slide 28 text

.zone { ... & .corner { ... &.top { top: -3%; } &.bottom { bottom: -3%; transform: scaleY(-1); } } } .left .zone

Slide 29

Slide 29 text

mi r & p e -el t Enem are ...

Slide 30

Slide 30 text

.left .middle .right .zone .zone .zone

Slide 31

Slide 31 text

.zone { ... &.right { transform: scaleX(-1); } } .right .zone

Slide 32

Slide 32 text

::before ::after

.middle .zone .middle { border-left: 4px solid white; width: 0; } ci l s o

Slide 33

Slide 33 text

.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%); }

Slide 34

Slide 34 text

.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

Slide 35

Slide 35 text

ba g d ad s Gras ...

Slide 36

Slide 36 text

.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

Slide 37

Slide 37 text

.field.classic { background-image: repeating-linear-gradient(to left, #066606 0 60px, #044d04 60px 120px); }

Slide 38

Slide 38 text

.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); }

Slide 39

Slide 39 text

.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

Slide 40

Slide 40 text

.field.circle { background-image: linear-gradient(160deg, transparent, rgba(0, 0, 0, 0.45)), repeating-radial-gradient(circle, #097709 0 60px, #076107 60px 140px); }

Slide 41

Slide 41 text

c t a s m Player

Slide 42

Slide 42 text

...

.playable .field { position: relative; & .playable { position: absolute; width: 100%; height: 100%; } }

Slide 43

Slide 43 text

...

.player.p$[data-number="$"]*11

Slide 44

Slide 44 text

.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); }

Slide 45

Slide 45 text

.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

...

Slide 46

Slide 46 text

.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

#fff #00f #00f5

Slide 47

Slide 47 text

.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

Slide 48

Slide 48 text

.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; } }

Slide 49

Slide 49 text

ﬂex & g i Formatio

Slide 50

Slide 50 text

[data-formation] /* Default formation */ .playable { display: flex; justify-content: center; align-items: center; & .player { margin: 5px; } }

Slide 51

Slide 51 text

[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; }

Slide 52

Slide 52 text

[data-formation] [data-formation="1-2-6-2"] { grid-template-areas: ". . d g ." ". b . . j" "a . e h ." ". c . . k" ". . f i ."; }

Slide 53

Slide 53 text

[data-formation] [data-formation="1-3-4-3"] { grid-template-areas: ". b . . i" ". . e g ." "a c . . j" ". . f h ." ". d . . k"; }

Slide 54

Slide 54 text

[data-formation] [data-formation="1-5-2-3"] { grid-template-areas: ". b . . i" ". c . . ." "a d g h j" ". e . . ." ". f . . k"; }

Slide 55

Slide 55 text

[data-formation] [data-formation="1-3-2-5"] { grid-template-areas: ". b . . g" ". . e . h" "a c . . i" ". . f . j" ". d . . k"; }

Slide 56

Slide 56 text

[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); }

Slide 57

Slide 57 text

Dem time

Slide 58

Slide 58 text

t a s m & pe p ve 3D

Slide 59

Slide 59 text

...

añadimos un contenedor

Slide 60

Slide 60 text

rotateY rotateX rotateZ perspective + value far user - value near user user (point view)

Slide 61

Slide 61 text

.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; }

Slide 62

Slide 62 text

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`); }

Slide 63

Slide 63 text

.field (good!) .player (baaad!)

Slide 64

Slide 64 text

field rotateX player rotateX = player translateZ field scale shift 0 20 field rotateX *-1 --field-scale --field-rotate-x --player-translate-z

Slide 65

Slide 65 text

.field { ... --player-rotate-x: 0deg; ... } .field, .playable { transform-style: preserve-3d; } .player { transform: rotateX(calc(var(--field-rotate-x) * -1)); }

Slide 66

Slide 66 text

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 }

Slide 67

Slide 67 text

.field (good!) .player (good!!)

Slide 68

Slide 68 text

.field { ... transition: transform 0.2s linear; will-change: transform; } .player { ... transition: transform 0.25s linear; will-change: transform; }

Slide 69

Slide 69 text

un & me u r e Responsiv

Slide 70

Slide 70 text

@media screen and (700px <= width <= 1100px) { } > 1100px < 1100px

Slide 71

Slide 71 text

@media screen and (700px <= width <= 1100px) { #app { & .field { --field-width: 700px; --field-rotate-z: -90deg; } } } 700px - 1100px

Slide 72

Slide 72 text

@media screen and (700px <= width <= 1100px) { #app { & .field { ... } & .player { transform: rotateZ(90deg); } } }

Slide 73

Slide 73 text

.player { transition: all 0.75s; } .field { transition: all 0.25s; } @media screen and (700px <= width <= 1100px) { ... } } transform will-change: transform;

Slide 74

Slide 74 text

@media screen and (width <= 700px) { .field { --field-width: 400px; --field-height: 250px; } } <= 900px

Slide 75

Slide 75 text

.field { --field-width: 70vw; } 100vw (viewport width)

Slide 76

Slide 76 text

we m en Energ

Slide 77

Slide 77 text

WebComponents

Slide 78

Slide 78 text

...

Slide 79

Slide 79 text

class TeamPlayer extends HTMLElement { constructor () { super(); ... this.innerHTML = 'Contenido'; } } customElements.define('team-player', TeamPlayer); Contenido

Slide 80

Slide 80 text

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); 6 p o s at b e

Slide 81

Slide 81 text

class TeamPlayer extends HTMLElement { constructor () { ... this.innerHTML = `

`; ... } } 6 .attrs .fill .life

Slide 82

Slide 82 text

.attrs { position: absolute; width: var(--player-width); transform: translateY(-52px); color: white; user-select: none; pointer-events: none; }

Slide 83

Slide 83 text

.player { --player-energy: 100; --player-energy-color: yellow; } 100 0 50

Slide 84

Slide 84 text

.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

Slide 85

Slide 85 text

.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);

Slide 86

Slide 86 text

class TeamPlayer extends HTMLElement { constructor () { ... this.style.setProperty( '--player-energy', `${this.energy}%` ); this.style.setProperty( '--player-energy-color', getEnergyColor(this.energy) ); ... } }

Slide 87

Slide 87 text

s e hS t e s Commentator

Slide 88

Slide 88 text

Slide 89

Slide 89 text

s a w DO Stadiu Bil Boar

Slide 90

Slide 90 text

No content

Slide 91

Slide 91 text

No content

Slide 92

Slide 92 text

Web ne Lig O Sha DO Glo C

Slide 93

Slide 93 text

class StadiumBillboard extends HTMLElement { constructor () { super(); ... this.innerHTML = ` stadium-billboard { border: 2px solid white; }

`; } } Glo C & H L (no l "wa " )

Slide 94

Slide 94 text

class StadiumBillboard extends HTMLElement { constructor () { super(); … this.attachShadow({ mode: 'open' }); this.shadowRoot.innerHTML = ` :host { border: 2px solid white; }

`; } } Loc S & H L (s a w "wa ")

Slide 95

Slide 95 text

stadium-billboard { border: 2px solid white; } Web ne stadium-billboard { border: 4px solid red; & .left.panel { border: 4px solid blue; } } Glo C