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.3k
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
590
CSS Fútbol
manz
0
860
Conceptos detrás de Wordpress: servidores y seguridad
manz
0
210
¿Por qué debería aprender a usar la terminal de GNU/Linux?
manz
0
300
Star Workshop CSS - JSDay Canarias 2018
manz
0
200
2001KB - A Slow Odyssey (Una odisea de despacio)
manz
0
320
TLP2017: Cursos OSL / FGULL / ULL
manz
0
190
Novedades de Front-end 2016 (CSS3, HTML5 y APIs Javascript)
manz
0
260
El Club de los Developers: Back to the Future
manz
0
180
Other Decks in Programming
See All in Programming
KotlinConf 2025 現地参加の土産話
n_takehata
0
100
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
800
Select API from Kotlin Coroutine
jmatsu
1
180
Enterprise Web App. Development (2): Version Control Tool Training Ver. 5.1
knakagawa
1
120
Elixir で IoT 開発、 Nerves なら簡単にできる!?
pojiro
1
150
GraphRAGの仕組みまるわかり
tosuri13
7
450
赤裸々に公開。 TSKaigiのオフシーズン
takezoux2
0
140
Beyond Portability: Live Migration for Evolving WebAssembly Workloads
chikuwait
0
380
技術懸念に立ち向かい 法改正を穏便に乗り切った話
pop_cashew
0
1.5k
從零到一:搭建你的第一個 Observability 平台
blueswen
1
960
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
240
社内での開発コミュニティ活動とモジュラーモノリス標準化事例のご紹介/xPalette and Introduction of Modular monolith standardization
m4maruyama
1
130
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
430
65k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.9k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
920
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Six Lessons from altMBA
skipperchong
28
3.8k
Faster Mobile Websites
deanohume
307
31k
Become a Pro
speakerdeck
PRO
28
5.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
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