Super Hero Web Layouts with CSS

A presentation at CodeMotion Webinar in December 2019 in by Anton Ball

Slide 1

SUPER HERO LAYOUTS @antonjb

Slide 2

GOLDEN @antonjb SILVER BRONZE MODERN

Slide 3

GOLDEN @antonjb SILVER BRONZE MODERN

Slide 4

GOLDEN @antonjb SILVER BRONZE MODERN

Slide 5

GOLDEN @antonjb SILVER BRONZE MODERN

Slide 6

GOLDEN @antonjb SILVER BRONZE MODERN

Slide 7

GOLDEN @antonjb SILVER BRONZE MODERN

Slide 8

1938 @antonjb 1950 70 YEARS 1970 NOW

Slide 9

HTML 26 @antonjb CSS 22

Slide 10

HTML FLASH RESPONSIVE @antonjb TABLE ABSOLUTE FLOAT INTRINSIC

Slide 11

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

Slide 12

ANTON BALL @antonjb

Slide 13

Action Comics #1 - DC Comics @antonjb

Slide 14

Action Comics #1 - DC Comics @antonjb

Slide 15

l e n a P @antonjb Gap

Slide 16

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

Slide 17

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

Slide 18

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

Slide 19

.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

Slide 20

Spider-man #121 - Marvel Comics @antonjb

Slide 21

Spider-man #121 - Marvel Comics @antonjb

Slide 22

@antonjb

Slide 23

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

Slide 24

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

Slide 25

Watchmen #7 - DC Comics @antonjb

Slide 26

Watchmen #7 - DC Comics @antonjb

Slide 27

.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

Slide 28

.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

Slide 29

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

Slide 30

.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

Slide 31

@antonjb

Slide 32

subgrid subgrid @antonjb

Slide 33

height @antonjb min-height

Slide 34

subgrid subgrid @antonjb

Slide 35

SUBGRID @antonjb

Slide 36

.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

Slide 37

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

Slide 38

Spider-man 2018 #9 - Marvel Comics @antonjb

Slide 39

Spider-man 2018 #9 - Marvel Comics @antonjb

Slide 40

.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

Slide 41

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

Slide 42

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

Slide 43

.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

Slide 44

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

Slide 45

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

Slide 46

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

Slide 47

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

Slide 48

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

Slide 49

STRUCTURE @antonjb CSS GRID MAINTAIN

Slide 50

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

Slide 51

@antonjb

Slide 52

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

Slide 53

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

Slide 54

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

Slide 55

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

Slide 56

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

Slide 57

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

Slide 58

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

Slide 59

.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

Slide 60

@antonjb

Slide 61

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

Slide 62

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

Slide 63

Detective Comics #876 - DC Comics @antonjb

Slide 64

.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

Slide 65

.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%); }

Slide 66

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

Slide 67

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

Slide 68

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

Slide 69

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

Slide 70

Saga 1 - Image Comics @antonjb

Slide 71

CSS SHAPES @antonjb

Slide 72

Saga 1 - Image Comics @antonjb

Slide 73

.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

Slide 74

@antonjb

Slide 75

.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

Slide 76

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

Slide 77

NANI?! 何 @antonjb WHAT?

Slide 78

NANI?! 何 @antonjb WHAT?

Slide 79

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

Slide 80

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

Slide 81

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

Slide 82

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

Slide 83

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

Slide 84

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

Slide 85

@antonjb

Slide 86

@antonjb

Slide 87

@antonjb

Slide 88

WITH GREAT POWER COMES GREAT RESPONSIBILITY - Uncle Ben @antonjb

Slide 89

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

Slide 90

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

Slide 91

“EVER UPWARD” EXCELSIOR! - Stan Lee @antonjb

Slide 92

THANK YOU @antonjb