Super Hero Layouts

SUPER HERO LAYOUTS @antonjb

GOLDEN @antonjb SILVER BRONZE MODERN

1938 @antonjb 1950 70 YEARS 1970 NOW

HTML 26 @antonjb CSS 22

HTML FLASH RESPONSIVE @antonjb TABLE ABSOLUTE FLOAT INTRINSIC

IT’S AMAZING HOW FAR WE HAVE PROGRESSED WITH LAYOUT @antonjb

ANTON BALL @antonjb

Action Comics #1 - DC Comics @antonjb

l e n a P @antonjb Gap

576PX 36PX 576 ÷ 36 = 16 COLUMNS @antonjb

.comic .comic {_ display: grid; grid-template-columns: repeat(16, 1fr); grid-gap: 12px; } https://codepen.io/antonjb/pen/vMPgBJ @antonjb

.comic Defined Grid .comic { display: grid; grid-template-columns: repeat(16, 1fr); grid-auto-rows: auto; } Track @antonjb

.comic .panel-1 span 6 .panel-2 span 5 .comic {_ display: grid; grid-template-columns: repeat(16, 1fr); grid-gap: 12px; } .panel-1 { grid-column: span 6; } .panel-2 { grid-column: span 5; }_ https://codepen.io/antonjb/pen/vMPgBJ @antonjb

Spider-man #121 - Marvel Comics @antonjb

@antonjb

.comic .comic {_ display: grid; grid-template-columns: repeat(23, auto); gap: 12px; }_ https://codepen.io/antonjb/pen/QPRKYN @antonjb

.comic .panel-1 .panel-2 column span 9 column span 7 row span 3 .panel-4 column span 8 row span 2 https://codepen.io/antonjb/pen/QPRKYN @antonjb .panel-1 { grid-column: span 9; grid-row: span 3; } .panel-2 { grid-column: span 7; } .panel-4 { grid-column: span 8; grid-row: span 2; }_

Watchmen #7 - DC Comics @antonjb

.comic .overlap .panel-3 .comic { display: grid; grid-template-columns: repeat(2, auto); grid-template-rows: repeat(3, auto); gap: 16px; }_ .overlap { display: grid; grid-column: span 2; } .panel-3 { grid-row: 1; grid-column: 1 / span 2; } https://codepen.io/antonjb/pen/rgvKrO @antonjb

.comic .overlap .panel-3 .comic { grid-template-columns: repeat(2, auto); } .overlap { display: grid; grid-column: span 2; grid-template-columns: subgrid; } https://codepen.io/antonjb/pen/rgvKrO @antonjb

.comic .overlap .overlap { display: grid; grid-column: span 2; grid-template-columns: subgrid; grid-template-rows: repeat(3, auto) } @antonjb

.comic .overlap .panel-3 .overlap { display: grid; grid-column: span 2; grid-template-columns: subgrid; } .overlap#::after { content: ’ ‘; outline: 16px solid #fff; grid-row: 1; grid-column: 1; } https://codepen.io/antonjb/pen/rgvKrO @antonjb

@antonjb

subgrid subgrid @antonjb

height @antonjb min-height

subgrid subgrid @antonjb

SUBGRID @antonjb

.comic .overlap .panel-3 .overlap { display: contents; } .overlap#::after { content: ’ ‘; outline: 16px solid #fff; grid-row: 2; grid-column: 1; } https://codepen.io/antonjb/pen/rbKdpE @antonjb

https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents @antonjb

Spider-man 2018 #9 - Marvel Comics @antonjb

.comic .comic { display: grid; grid-template-columns: 1fr 6fr 4fr 9fr 6fr repeat(2, 1fr); grid-template-rows: 16px 2.35fr 1fr 0.5fr 0.3fr 1fr 1fr 0.35fr 0.45fr 1.25fr; } https://codepen.io/antonjb/pen/yrmQez @antonjb

9 985PX ROWS @antonjb Spider-man 2018 #9 - Marvel Comics 985 ÷ 9 = 109

291PX 291 ÷ 109 = 2.6FR @antonjb Spider-man 2018 #9 - Marvel Comics

.comic .comic { display: grid; grid-template-columns: 1fr 6fr 4fr 9fr 6fr repeat(2, 1fr); grid-template-rows: 16px 2.35fr 1fr 0.5fr 0.3fr 1fr 1fr 0.35fr 0.45fr 1.25fr; } .panel-3 .panel-4 .panel-3 { grid-row: 4 / 7; grid-column: 5 / span 1; z-index: 1; } .panel-4 { grid-row: 5 / 9; grid-column: 2 / -2; } https://codepen.io/antonjb/pen/yrmQez @antonjb

12 3 4 5 678 .panel-4 { grid-column: 2 / -2; } Grid Line @antonjb

12 3 4 5 678 .panel-4 { grid-column: 2 / -2; } -8 @antonjb -6 -5 -4 -2

.panel-4 { grid-column: 2 / -2; } @antonjb

Hawkeye #1 - Marvel Comics @antonjb https://codepen.io/antonjb/pen/zQOvqa

.panel-4 { grid-row: 5 / 9; grid-column: 2 / -2; } @antonjb .panel-4 { grid-row: 1 / span 5; grid-column: 1 / -1; }

STRUCTURE @antonjb CSS GRID MAINTAIN

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility @antonjb

@antonjb

Generations: Phoenix and Jean Grey - Marvel Comics @antonjb https://codepen.io/antonjb/pen/mYyJvj

CLIP-PATH I don’t feel so good… @antonjb

.comic .comic { position: relative; background-image: url(space.jpg); background-size: cover; background-position: center; overflow: hidden; } @antonjb

.comic .panels .panel-2 @antonjb .panel-3 .panels { display: grid; grid-template-columns: 3fr repeat(4, 1fr) 2fr; }

1 l 2 l 3 l 4 5 l l e e e e e n n n n n a a a a a .p .p .p .p .p .panels { display: grid; grid-template-columns: 3fr repeat(4, 1fr) 2fr; } @antonjb

.comic .panels @antonjb .panels { display: grid; grid-template-columns: 3fr repeat(4, 1fr) 2fr; position: absolute; left: -20%; right: -20%; bottom: -10%; top: 20%; transform: rotate(-20deg) translateY(100px); }

0 18% 20% 20% x y .panel-3 { clip-path: polygon(0 18%, 20% 20%, 78% 71%, 63% 100%, 5% 80%); } 78% 71% 5% 80% 63% 100% @antonjb

.comic .panel-1 { grid-column: 1 / 1; grid-row: 1; clip-path: polygon(0 2%, 98% 15%, 89% 100%, 0 100%); } .panel-2 { grid-column: 1 / span 3; grid-row: 1; z-index: 1; clip-path: polygon(59% 16%, 80% 18%, 86% 100%, 54% 100%); } .panel-1 @antonjb .panel-2

@antonjb

.comic .panel-1 { grid-column: 1 / 1; grid-row: 1; clip-path: polygon(1% 2%, 98.5% 15.75%, 89% 100%, 0 100%); } .panel-1 @antonjb .panel-1 img { clip-path: polygon(1% 2%, 98.5% 15.75%, 89% 100%, 0 100%); transform: scale(0.95); transform-origin: 70% 22%; }

https://codepen.io/antonjb/pen/mYyJvj @antonjb

Detective Comics #876 - DC Comics @antonjb

.panel-1 .panel-2 .panel-1 { grid-row: 1 / span 3; grid-column: 1 / span 4; transform: perspective(200px) rotate(-14deg, 6deg, -10deg); } .panel-2 { grid-row: 2 / span 3; grid-column: 2 / span 4; transform: perspective(600px) rotate(-16deg, 4deg); } https://codepen.io/antonjb/pen/EJOLMx @antonjb

.panel-3 @antonjb .panel-3 { grid-row: 2 / span 3; grid-column: 2 / span 4; transform: perspective(600px) rotateX(-16deg) rotateY(4deg); clip-path: polygon(207px -7px, 315px -8px, 310px 189px, -1% 102%, -6px 88px, 69% 20%); }

https://codepen.io/antonjb/pen/EJOLMx @antonjb Detective Comics #876 - DC Comics

https://codepen.io/antonjb/pen/JqjdBr @antonjb Flash - DC Comics

X ellipse(148px 202px at 245px 205px); Radius @antonjb Y

X circle(156px at 241px 162px); Radius @antonjb Y

Saga 1 - Image Comics @antonjb

CSS SHAPES @antonjb

Saga 1 - Image Comics @antonjb

.panel-1 { position: relative; } .panel p .panel img .panel p { margin: 0; margin-left: 100px; margin-top: 8px; width: 400px; } .panel img { float: right; width: 800px; height: 800px; shape-outside: circle(219px at 355px 225px); } https://codepen.io/antonjb/pen/xNGEye @antonjb

@antonjb

.panel img .panel img { float: right; shape-outside: polygon(349px 4px, 500px 1px, 99.44% 99.51%, 286px 282px, 54.86% 74.82%, 47.21% 64.25%, 48.08% 47.82%, 52.5% 32.01%, 63.98% 17.66%); } https://codepen.io/antonjb/pen/xNGEye @antonjb

cat-mask.png .panel img { float: right; shape-outside: url(‘cat-mask.png’) } @antonjb

NANI?! 何 @antonjb WHAT?

Start Finish @antonjb Naruto Vol. 1 - Shueisha Naruto Vol. 1 - Madman Entertainment

<main class=”comic” dir=“ltr”> @antonjb https://codepen.io/antonjb/pen/EzKBKz

<main class=”comic” dir=”rtl”> @antonjb https://codepen.io/antonjb/pen/EzKBKz

.comic .comic { display: grid; grid-gap: 2rem 1rem; } @antonjb

Naruto Vol. 1 - Shueisha @antonjb Naruto Vol. 1 - Madman Entertainment

.bubble .bubble { writing-mode: vertical-rl; } @antonjb

@antonjb

WITH GREAT POWER COMES GREAT RESPONSIBILITY - Uncle Ben @antonjb

RACHEL ANDREW RESOURCES https://twitter.com/rachelandrew https://gridbyexample.com/ @antonjb JEN SIMMONS https://twitter.com/jensimmons https://labs.jensimmons.com/

CODEPEN COLLECTION https://codepen.io/collection/DjwRaP/ @antonjb

“EVER UPWARD” EXCELSIOR! - Stan Lee @antonjb

THANK YOU @antonjb