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
610
CSS Fútbol
manz
0
880
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
210
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
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
thagikura
0
160
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
240
はじめてのMaterial3 Expressive
ym223
2
860
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
400
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
230
複雑なドメインに挑む.pdf
yukisakai1225
5
1.2k
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
550
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
330
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
470
ファインディ株式会社におけるMCP活用とサービス開発
starfish719
0
1.8k
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
770
Reading Rails 1.0 Source Code
okuramasafumi
0
240
Featured
See All Featured
Code Review Best Practice
trishagee
70
19k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Agile that works and the tools we love
rasmusluckow
330
21k
Designing for humans not robots
tammielis
253
25k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
A Tale of Four Properties
chriscoyier
160
23k
The World Runs on Bad Software
bkeepers
PRO
70
11k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
RailsConf 2023
tenderlove
30
1.2k
A Modern Web Designer's Workflow
chriscoyier
696
190k
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