CSS Grid Cards

Flexbox, Grid CSS, Position, Tranforms and others.

Transcript

1. José Román Hdez @Manz
2. twitter.com/manz
3. no , no es Preparing...
4. @import url('https://fonts.googleapis.com/css?family =Montserrat:600'); :root { background: green; font-family: Montserrat, sans-serif; font-weight: 600; } Usa "po c -fo -ma an" pu ah r e s or
5. <div class="card"></div>
6. .card { width: 125px; height: 200px; background: white; border-radius: 10px; padding: 16px 8px; margin: 5px; }
7. <div class="card" data-card="1" data-suit="♠"> </div> Dat E en : Met os et e s H L
8. .deck for c in [1,2,3,4,5,6,7,8,9,10] .card(data-card=`${c}`, data-suit="♠") 10 ca s un aj (de ) di l : b o k di l : in -b o k
9. .deck { display: flex; flex-wrap: wrap; } us f e b mu l e (ev u s e b )
10. ♥ ♠ ♦ ♣ :spades: U+2660 U+FE0F :hearts: U+2665 U+FE0F :diamonds: U+2666 U+FE0F :clubs: U+2663 U+FE0F 4 suits / 4 emojis
11. <div class="card" data-card="2" data-suit="♠"> <span class="item">♠</span> <span class="item">♠</span> </div> .ca ♠ ♠ .it .it
12. 10 cards [1...10] 3 cards [J,Q,K] 52 cards
13. .deck for s in ['♠','♥','♦','♣'] for c in [1,2,3,4,5,6,7,8,9,10] .card(data-card=`${c}`, data-suit=`${s}`) for i in [...Array(c).keys()] span.item= s 10 ca s un aj (de ) 4 pa en ca , c e núme de ím o s re n e t ♠ ♠♠ ♠♠♠ ♠♠♠♠ ♠♠♠♠♠ ♠♠♠♠♠♠ ♠♠♠♠♠♠♠ ♠♠♠♠♠♠♠♠ ♠♠♠♠♠♠♠♠♠ ♠♠♠♠♠♠♠♠♠♠
14. .card { font-size: 52px; } [data-suit="♥"], [data-suit="♦"] { color: red; } ♠ ♥ ♦ ♣
15. f e b , g i & po on Dealing...
16. [data-card="1"] { display: flex; justify-content: center; align-items: center; font-size: 92px; } ju f -co n al -it ♠
17. [data-card="2"], [data-card="3"] { display: flex; flex-direction: column; justify-content: center; align-items: center; } ♠ f e -di t o : ro f e -di t o : co n ♠
18. [data-card="4"] { display: grid; grid-template-rows: 50% 50%; grid-template-columns: 50% 50%; justify-items: center; align-items: center; } ♠ te l -co n te l -ro ♠ ♠ ♠ 50% 50% 50% 50%
19. [data-card="5"] { display: grid; grid-template-areas: "a . b" ". c ." "d . e"; justify-items: center; align-items: center; & .item:nth-child(1) { grid-area: a; } ... } ♠ áre áre ♠ ♠ ♠ @use postcss-nested; áre áre ♠ áre Hay om r la 5 áre
20. [data-card="6"], [data-card="7"], [data-card="8"] { display: grid; grid-template-rows: repeat(3,1fr); grid-template-columns: repeat(2,1fr); justify-items: center; align-items: center; } ♠ ♠ ♠ ♠ 1f 1f 1f ♠ ♠ 1f 1f 1f 1f 1f 2f 3f
21. [data-card="7"], [data-card="8"] { position: relative; & .item:nth-child(1) { position: absolute; top: 20%; } } ♠ ♠ ♠ ♠ ♠ ♠♠ ♠ re ve ab te to 20%
22. [data-card="8"] { & .item:nth-child(8) { position: absolute; bottom: 20%; } } ♠ ♠ ♠ ♠ ♠ ♠♠ ♠ ♠ bo m 20%
23. [data-card="9"], [data-card="10"] { display: grid; grid-template-rows: repeat(4, 25%); grid-template-columns: 50% 50%; justify-items: center; align-items: center; position: relative; & .item:nth-child(1) { position: absolute; } } ♠ ♠ ♠ ♠ ♠ ♠ ♠ ♠♠ 50% 50% 25% 25% 25% 25% ab te
24. [data-card="10"] { position: relative; & .item:nth-child(1) { position: absolute; top: 15%; } & .item:nth-child(10) { position: absolute; bottom: 15%; } } ♠ ♠ ♠ ♠ ♠ ♠ ♠ ♠♠ ♠ bo m ♠ to
25. c t a s m mirror / mirror
26. [data-card="5"] .item:nth-child(n+4) { ... } :n -c i d n+4 1 2 3 4 5 de r o m en an
27. [data-card="2"] .item:nth-child(n+2), [data-card="3"] .item:nth-child(n+3), [data-card="4"] .item:nth-child(n+3), [data-card="5"] .item:nth-child(n+4), [data-card="6"] .item:nth-child(n+5), [data-card="7"] .item:nth-child(n+6), [data-card="8"] .item:nth-child(n+6), [data-card="9"] .item:nth-child(n+6), [data-card="10"] .item:nth-child(n+6) { transform: translateY(8px) scaleY(-1); } s a Y -1 ♠ ♠
28. f e b Jack, Queen & King...
29. ... for c in [1,2,3,4,5,6,7,8,9,10] ... for c in ['J','Q','K'] .card(data-card=`${c}`, data-suit=`${s}`) span.item= c+s Jac , Qu n & Kin la ra + el J♠ Q♠ K♠
30. [data-card="J"], [data-card="Q"], [data-card="K"] { display: flex; justify-content: center; align-items: center; & .item { border: 1px solid #ccc; border-radius: 10px; padding: 30px 12px; } } J♠ al -it ju f -co n
31. c co n ne d Check cards...
32. [data-card] { position: relative; &::before { content: 'Manz'; font-size: 17px; position: absolute; } } c co n ne d re ve ♠ ♠ Manz
33. [data-card] { position: relative; &::before, &::after { content: 'Manz'; font-size: 17px; position: absolute; } &::before { top: 0; left: 0; } } ::af ::be ♠ Manz Manz es a s i r-iz am ♠
34. [data-card] { position: relative; &::before, &::after { content: 'Manz'; font-size: 17px; position: absolute; } &::before { top: 0; left: 0; } &::after { bottom: 0; right: 0; } } Manz ♠ Manz ::be ::af es a s i r-iz es a n i r-de h ♠
35. [data-card] { position: relative; &::before, &::after { content: attr(data-card) attr(data-suit); font-size: 17px; position: absolute; } &::before { top: 4px; left: 4px; } &::after { bottom: 4px; right: 4px; } } ♠ 2♠ 2♠ núme + pa (me to ) to 4p le 4p bo m4p ri t 4p ♠
37. c me u r e Connect from phone...
38. @media screen and (max-width:800px){ .card::after, .item { display: none; } } ♠ ♠ 2♠ 2♠ sólo n a l < 800p oc mo oc mo
39. @media screen and (max-width:800px){ ... .card { width: 38px; height: 48px; display: flex; justify-content: center; align-items: center; } .card::before { position: static; font-size: 24px; } } 2♠ re n i mo
41. ho n li r Waiting for player...
42. .card:hover { box-shadow: 2px 8px 10px rgba(0,0,0, 0.5); transform: translate(-1px, -6px); transition: transform 0.2s ease; will-change: transform; user-select: none; cursor: pointer; } ♠ 2♠ 2♠ ♠ ♠ 2♠ 2♠ ♠ 1p 6p
43. .card.flipped { background: repeating-linear-gradient(45deg, #11f 10%, #44f 22%); radial-gradient(#f23 80%, #a12 64%); conic-gradient(red,yellow,lime, aqua,blue,magenta,red); & *, &::before, &::after { display: none; } } ♠ 2♠ 2♠ ♠ 1 1 2 3 2 3
44. Drag & Drop...
45. document.querySelectorAll('.card').forEach(e => { e.classList.add('flipped'); e.addEventListener('dblclick', c => c.currentTarget.classList.toggle('flipped')); e.addEventListener('wheel', c => c.currentTarget.style.transform = `rotate(${c.deltaY / 10}deg)`); displacejs(e); });
48. ¡Gracias! José Román Hdez @Manz