Super Hero Layouts

A presentation at Fenders Perth in May 2019 in Perth WA, Australia by Anton Ball

HTML FLASH RESPONSIVE @antonjb TABLE ABSOLUTE FLOAT INTRINSIC

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

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

.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; }_

.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

.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

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; }

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility @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

.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

.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

.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

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

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

Anton Ball
@antonball

1 / 92

Modern CSS layout techniques opened a world of possibilities. Layouts previously thought impossible become possible. A great way of mastering techniques is through play, so I turned to one of my favourite hobbies - comic books.

Taking well known layouts, how could elements be built in a browser, such as uneven shapes, ever changing layout and many variations? This talk is going to dive into using modern CSS layout techniques to recreate elements of comic books with CSS Grid, writing mode, CSS shapes and more. Come along to see CSS layouts at play.

Resources

The following resources were mentioned during the presentation or are useful additional information.

CodePen Collection

The code samples from the talk

Super Hero Layouts

Link for this presentation:

HTML code for embedding:

Share on social media:

Resources

CodePen Collection