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
210
2001KB - A Slow Odyssey (Una odisea de despacio)
manz
0
320
TLP2017: Cursos OSL / FGULL / ULL
manz
0
200
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
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
5.8k
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
890
ニーリーにおけるプロダクトエンジニア
nealle
0
840
Team operations that are not burdened by SRE
kazatohiei
1
310
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
120
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
420
A2A プロトコルを試してみる
azukiazusa1
2
1.4k
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
290
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
170
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
1
190
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.3k
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
590
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
How to train your dragon (web standard)
notwaldorf
95
6.1k
We Have a Design System, Now What?
morganepeng
53
7.7k
Building Adaptive Systems
keathley
43
2.7k
Building Applications with DynamoDB
mza
95
6.5k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
The Language of Interfaces
destraynor
158
25k
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