Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CSS Grid Cards
Search
Manz
July 19, 2018
Programming
3
1.1k
CSS Grid Cards
Flexbox, Grid CSS, Position, Tranforms and others.
Manz
July 19, 2018
Tweet
Share
More Decks by Manz
See All by Manz
JSDay 2019: ApocalipCSS
manz
0
440
CSS Fútbol
manz
0
710
Conceptos detrás de Wordpress: servidores y seguridad
manz
0
140
¿Por qué debería aprender a usar la terminal de GNU/Linux?
manz
0
280
Star Workshop CSS - JSDay Canarias 2018
manz
0
160
2001KB - A Slow Odyssey (Una odisea de despacio)
manz
0
240
TLP2017: Cursos OSL / FGULL / ULL
manz
0
110
Novedades de Front-end 2016 (CSS3, HTML5 y APIs Javascript)
manz
0
230
El Club de los Developers: Back to the Future
manz
0
150
Other Decks in Programming
See All in Programming
Semantic search with Django and pgvector
pauloxnet
0
240
デフォルトにして至高、RubyMineの大好きな所
ruzia
0
290
"config" ってなんだ? / What is "config"?
okashoi
0
240
Apache Hive 4 on Treasure Data
ryukobayashi
0
100
Ruby Function Composition
bkuhlmann
1
330
Zero Waste, Radical Magic, and Italian Graft – Quarkus Efficiency Secrets
hollycummins
0
230
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
190
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
530
GitHub Copilotのススメ
marcy731
1
200
Rethinking UI building strategies @ SFI 2024
letelete
0
270
雑に思考を整理する技術と効能
konifar
58
29k
코틀린으로 멀티플랫폼 만들기
pangmoo
0
150
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
322
20k
Unsuck your backbone
ammeep
663
57k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Web development in the modern age
philhawksworth
202
10k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
9
8.3k
BBQ
matthewcrist
80
8.8k
What the flash - Photography Introduction
edds
64
11k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
2
1.3k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Web Components: a chance to create the future
zenorocha
305
41k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
19
1.7k
Product Roadmaps are Hard
iamctodd
44
9.7k
Transcript
José Román Hdez @Manz
twitter.com/manz
no , no es Preparing...
@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
<div class="card"></div>
.card { width: 125px; height: 200px; background: white; border-radius: 10px;
padding: 16px 8px; margin: 5px; }
<div class="card" data-card="1" data-suit="♠"> </div> Dat E en : Met
os et e s H L
.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
.deck { display: flex; flex-wrap: wrap; } us f e
b mu l e (ev u s e b )
♥ ♠ ♦ ♣ :spades: U+2660 U+FE0F :hearts: U+2665 U+FE0F
:diamonds: U+2666 U+FE0F :clubs: U+2663 U+FE0F 4 suits / 4 emojis
<div class="card" data-card="2" data-suit="♠"> <span class="item">♠</span> <span class="item">♠</span> </div> .ca
♠ ♠ .it .it
10 cards [1...10] 3 cards [J,Q,K] 52 cards
.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 ♠ ♠♠ ♠♠♠ ♠♠♠♠ ♠♠♠♠♠ ♠♠♠♠♠♠ ♠♠♠♠♠♠♠ ♠♠♠♠♠♠♠♠ ♠♠♠♠♠♠♠♠♠ ♠♠♠♠♠♠♠♠♠♠
.card { font-size: 52px; } [data-suit="♥"], [data-suit="♦"] { color: red;
} ♠ ♥ ♦ ♣
f e b , g i & po on Dealing...
[data-card="1"] { display: flex; justify-content: center; align-items: center; font-size: 92px;
} ju f -co n al -it ♠
[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 ♠
[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%
[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
[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
[data-card="7"], [data-card="8"] { position: relative; & .item:nth-child(1) { position: absolute;
top: 20%; } } ♠ ♠ ♠ ♠ ♠ ♠♠ ♠ re ve ab te to 20%
[data-card="8"] { & .item:nth-child(8) { position: absolute; bottom: 20%; }
} ♠ ♠ ♠ ♠ ♠ ♠♠ ♠ ♠ bo m 20%
[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
[data-card="10"] { position: relative; & .item:nth-child(1) { position: absolute; top:
15%; } & .item:nth-child(10) { position: absolute; bottom: 15%; } } ♠ ♠ ♠ ♠ ♠ ♠ ♠ ♠♠ ♠ bo m ♠ to
c t a s m mirror / mirror
[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
[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 ♠ ♠
f e b Jack, Queen & King...
... 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♠
[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
c co n ne d Check cards...
[data-card] { position: relative; &::before { content: 'Manz'; font-size: 17px;
position: absolute; } } c co n ne d re ve ♠ ♠ Manz
[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 ♠
[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 ♠
[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 ♠
None
c me u r e Connect from phone...
@media screen and (max-width:800px){ .card::after, .item { display: none; }
} ♠ ♠ 2♠ 2♠ sólo n a l < 800p oc mo oc mo
@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
None
ho n li r Waiting for player...
.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
.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
Drag & Drop...
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); });
None
None
¡Gracias! José Román Hdez @Manz