Slide 1
Slide 1 text
A Tale of Four
Properties
That are kinda related to shapes in CSS
Chris Coyier @chriscoyier // CodePen • CSS-Tricks • ShopTalk
Slide 2
Slide 2 text
`
Slide 3
Slide 3 text
LET'S JUST SAY
Slide 4
Slide 4 text
YOU REALLY LIKE
REALLY
Slide 5
Slide 5 text
THEY MIGHT
BE GIANTS
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
YOU REALLY
ONLY HAVE
One Choice
Slide 10
Slide 10 text
FAN SITE!!!!
Slide 11
Slide 11 text
LYRICS
ANDANDAND
OMGSTUFFFFF
What goes on a fan site?
Slide 12
Slide 12 text
GUESTBOOK
TMBG!!!!
LYRICS!!!!
PHOTOS!!!!
CLUBHOUSE
VISITOR COUNTER: 1113459784
Slide 13
Slide 13 text
Let's make a SUPER FUN lyrics page for
PARTICLE MAN
Slide 14
Slide 14 text
Particle Man
Particle man, particle man
Doing the things a particle can
What's he like? It's not important
Particle man
Is he a dot, or is he a speck?
When he's underwater does he get wet?
Or does the water get him instead?
Nobody knows, Particle man
Triangle man, Triangle man
Triangle man hates particle man
They have a fight, Triangle wins
Triangle man
Universe man, Universe man
Size of the entire universe man
Usually kind to smaller man
Universe man
Slide 15
Slide 15 text
Particle Man
Particle man, particle man
Doing the things a particle can
What's he like? It's not important
Particle man
Is he a dot, or is he a speck?
When he's underwater does he get wet?
Or does the water get him instead?
Nobody knows, Particle man
Triangle man, Triangle man
Triangle man hates particle man
They have a fight, Triangle wins
Triangle man
Universe man, Universe man
Size of the entire universe man
Usually kind to smaller man
Universe man
Slide 16
Slide 16 text
I AM GONNA NEED THAT TEXT
IDEA TIME
TO BE ALL SLANTED UP.
LIKE TRIANGLE MAN!!!!
Slide 17
Slide 17 text
I AM GONNA NEED THA
IDEA TIME
TO BE ALL SLANTED
LIKE TRIANGLE
Slide 18
Slide 18 text
Particle Man
Particle man, particle man Doing the things a particle can What's he like? It's not important Particle man Is he a dot, or is he a speck? When he's underwater does he get wet? Or does the water get him instead? Nobody knows, Particle man Triangle man, Triangle man Triangle man hates particle man They have a fight, Triangle wins Triangle man Universe man, Universe man Size of the entire universe man Usually kind to smaller man Universe man Hey it's got the right indie spirit! but we can do "better", I guess.
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
ELEMENT
THAT IS
FLOATED
Slide 21
Slide 21 text
There is a cool property that allows
us to SHAPE that floated element.
(In the future, we might be able to do this without having to float the element with CSS exclusions.)
Slide 22
Slide 22 text
.shape {
float: left;
width: 200px;
height: 200px;
}
ELEMENT
THAT IS
FLOATED
Slide 23
Slide 23 text
ELEMENT
THAT IS
FLOATED
.shape {
float: left;
width: 200px;
height: 200px;
shape-outside
}
Slide 24
Slide 24 text
ELEMENT
THAT IS
FLOATED
.shape {
float: left;
width: 200px;
height: 200px;
shape-outside:
polygon(
);
}
Slide 25
Slide 25 text
ELEMENT
THAT IS
FLOATED
.shape {
float: left;
width: 200px;
height: 200px;
shape-outside:
polygon(
100px 0,
200px 200px,
0 200px
);
}
Slide 26
Slide 26 text
ELEMENT
THAT IS
FLOATED
.shape {
float: left;
width: 200px;
height: 200px;
shape-outside:
polygon(
100px 0,
200px 200px,
0 200px
);
}
Slide 27
Slide 27 text
shape-outside is like chipping away
at a floated element.
redefining
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
You can even ANIMATE it.
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
.shape {
transition: shape-outside 2s ease-in-out;
float: left;
width: 99%;
height: 100%;
}
.triangle-off {
shape-outside: polygon(0 0, 0 100%, 0 100%, 0 0);
}
.triangle-man {
shape-outside: polygon(0 0, 0 100%, 50% 100%, 0 0);
}
Basically a zero-width triangLE
the real triangle
Slide 32
Slide 32 text
https://codepen.io/netsi1964/pen/gLvyxj
Slide 33
Slide 33 text
NOW LET'S DO
UNIVERSE MAN
Slide 34
Slide 34 text
UNIVERSE MAN
HE's GONNA BUTT IN AND
SMASH HIS BELLY ALL UP IN
THIS TEXT!!!!
Slide 35
Slide 35 text
https:/
/www.youtube.com/watch?v=LsAiCs66l40
Slide 36
Slide 36 text
shape-outside can take a
circle() or ellipse() as well
as polygon().
Slide 37
Slide 37 text
.shape {
transition: shape-outside 2s ease-in-out;
float: left;
width: 99%;
height: 100%;
}
.universe-off {
shape-outside: ellipse(200px 200px at 0 -300px);
}
.universe-man {
shape-outside: ellipse(200px 200px at 0 300px);
}
Moved to nowheresville
Slide 38
Slide 38 text
floated thing
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
button.addEventListener("click", function() {
// Immediately remove base class
xman.classList.remove("triangle-man", "universe-man");
clickedGuy = button.getAttribute("data-class");
if (currentGuy === "") {
xman.classList.add(clickedGuy);
currentGuy = clickedGuy;
} else {
// Add the class for transitioning OFF
xman.classList.add(currentGuy + "-off");
xman.classList.remove(currentGuy);
setTimeout(function() {
xman.classList.remove(currentGuy + "-off");
// Add the final ON class
xman.classList.add(clickedGuy + "-off");
setTimeout(function() {
xman.classList.add(clickedGuy);
currentGuy = clickedGuy;
}, 100);
}, 2000);
}
You can't transition
a polygon() to an
ellipse()
This javascript is
all about
manipulating
classes so
transitions are
always shape-to-
shape
Slide 44
Slide 44 text
There is actually tasteful
stuff you can do with
shape-outside()
Slide 45
Slide 45 text
https://codepen.io/stacy/pen/aWKerN
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
MAYBE
PERSON MAN?
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
polygon() circle() ellipse() inset() path() url()
shape-outside
❌ #
Slide 51
Slide 51 text
PERSON MAN?
Slide 52
Slide 52 text
polygon() circle() ellipse() inset() path() url()
shape-outside
❌
This is all assuming we're in a browser
that supports shape-outside at all!
Slide 53
Slide 53 text
You can kinda fake curves with
polygons with lots of points...
Slide 54
Slide 54 text
Let's just put a pin in that.
Slide 55
Slide 55 text
WE NEED TO DEAL
WITH PARTICLE
MAN OMGG!!!!
Slide 56
Slide 56 text
WITH PARTICLE
MAN OMGG!!!!
HE NEEDS TO BE FLYING ALL
AROUND THIS SUCKAAAA LIKE
A PARTICLE WOULD!!!!
Slide 57
Slide 57 text
No content
Slide 58
Slide 58 text
AIN't no polygon() gonna
work here.
I need fluid motion action!!!!
Slide 59
Slide 59 text
Fortunately there is a perfect CSS
property for us: offset-path()
Slide 60
Slide 60 text
Actually, it used to be called motion-path()
Slide 61
Slide 61 text
.thing-that-moves {
/* "Old" syntax.
Available in Blink browsers as of ~October 2015 */
motion-path: ;
/* Currently spec'd syntax.
Should be in stable Chrome as of ~December 2016 */
offset-path: ;
}
Slide 62
Slide 62 text
.thing-that-moves {
/* "Old" syntax.
Available in Blink browsers as of ~October 2015 */
motion-path: path("M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8
/* Currently spec'd syntax.
Should be in stable Chrome as of ~December 2016 */
offset-path: path("M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8
}
Slide 63
Slide 63 text
PATHS ARE
AWESOME
they can draw anything!!!!
All other drawing is syntactic sugar!!!!
Slide 64
Slide 64 text
Path comes from SVG land.
Slide 65
Slide 65 text
https://css-tricks.com/svg-path-syntax-illustrated-guide/
Slide 66
Slide 66 text
No content
Slide 67
Slide 67 text
No content
Slide 68
Slide 68 text
No content
Slide 69
Slide 69 text
#particle-man {
width: 5px;
height: 5px;
background: blue;
offset-path: path('m68.5,161c0,0 53,-121 152,-66c99,55 146,241
293,99c147,-142 -54,-163 -126.5,-126c-72.5,37 -92.5,369
-229.5,249c-137,-120 55,-222 145,-193c90,29 6,284 104,222c98,-62 240,-319
-75,-268c-315,51 167,336 -91,292c-258,-44 -172,-209 -172,-209z');
animation: is-he-a-dot-or-is-he-a-spec 3s linear infinite;
}
@keyframes is-he-a-dot-or-is-he-a-spec {
100% { motion-offset: 100%; } /* defaults to 0 */
}
HTML
CSS
Slide 70
Slide 70 text
No content
Slide 71
Slide 71 text
No content
Slide 72
Slide 72 text
No content
Slide 73
Slide 73 text
Here's the rub:
offset-path only takes path()
Slide 74
Slide 74 text
A litttttttle bit WHAT THE F*CK.
A litttttttle bit understandable.
Slide 75
Slide 75 text
It is called offset-path...
But more importantly, paths have a
direction. circle() is a nice syntax for a
circle, but it doesn't tell you what direction
to travel along it all by itself. A path does.
Slide 76
Slide 76 text
polygon() circle() ellipse() inset() path() url()
shape-outside
❌
offset-path ❌ ❌ ❌ ❌
❌
Slide 77
Slide 77 text
There is actually tasteful,
nice stuff you can do with
offset-path()
Slide 78
Slide 78 text
No content
Slide 79
Slide 79 text
No content
Slide 80
Slide 80 text
No content
Slide 81
Slide 81 text
WE GONNA NEED SOME
SURPRISING REVEALS!
IDEA TIME
Slide 82
Slide 82 text
LET's make a lyrics page
for your racist friend!!!!
Slide 83
Slide 83 text
No content
Slide 84
Slide 84 text
No content
Slide 85
Slide 85 text
You can clip elements!
With clip-path!
Slide 86
Slide 86 text
Remember how with
shape-outside we could use shapes
like polygon() and circle()?
Those work with clip-path too!
The old name was clip.
Slide 87
Slide 87 text
Here's another one: inset()
Slide 88
Slide 88 text
clip-path:
inset(
0 /* top */
20px /* right */
20px /* bottom */
280px /* left */
);
Slide 89
Slide 89 text
.racist-friend {
position: fixed;
bottom: -4px;
left: 0;
display: block;
width: 500px;
transition: 1.5s;
transform: translateX(-200px);
clip-path: inset(0 20px 20px 280px);
&:hover {
transform: translateX(0);
clip-path: inset(0 0 0 0);
}
}
Slide 90
Slide 90 text
No content
Slide 91
Slide 91 text
There is actually tasteful,
nice stuff you can do with
clip-path()
Slide 92
Slide 92 text
No content
Slide 93
Slide 93 text
clip-path: polygon(
0 0, 100% 4%, 100% 93%, 0 100%
);
clip-path: polygon(
0 0, 100% 6%, 100% 100%, 0 94%
);
https://codepen.io/chriscoyier/pen/EVQweM?editors=1100
Slide 94
Slide 94 text
div {
clip-path: polygon(100%
0%, 75% 50%, 100% 100%,
25% 100%, 0% 50%, 25% 0%);
animation: shimmy 1s
infinite alternate ease-
in-out;
}
@keyframes shimmy {
100% {
clip-path: polygon(75%
0%, 100% 50%, 75% 100%, 0%
100%, 25% 50%, 0% 0%);
}
}
https://codepen.io/chriscoyier/pen/EyjvgV
Slide 95
Slide 95 text
https://codepen.io/chriscoyier/pen/wBKPOm/
Slide 96
Slide 96 text
div {
transition: 0.4s cubic-bezier(1, -1, 0, 2);
clip-path: polygon(50% 5%, 0% 100%, 100% 100%);
}
div:hover {
clip-path: polygon(50% 19%, 0 76%, 100% 76%);
}
Slide 97
Slide 97 text
https://codepen.io/noeldelgado/pen/PZJGLx?ed
Slide 98
Slide 98 text
https://codepen.io/suez/pen/grJONP
Slide 99
Slide 99 text
No content
Slide 100
Slide 100 text
Guess what?
It's sad.
No path()
Slide 101
Slide 101 text
polygon() circle() ellipse() inset() path() url()
shape-outside
❌
offset-path
❌ ❌ ❌ ❌ ❌
clip-path
❌
✂
Slide 102
Slide 102 text
There are ways to get curved clipping:
1) Use clip-path: url("#clipPath");
2) Use mask which can point to an SVG file,
which can have paths.)
Slide 103
Slide 103 text
No content
Slide 104
Slide 104 text
No content
Slide 105
Slide 105 text
SO. SPEAKING
OF SVG.
Slide 106
Slide 106 text
SO. SPEAKING
OF SVG.
Slide 107
Slide 107 text
SO. SPEAKING
OF SVG.
Slide 108
Slide 108 text
SVG doesn't have wrapped text or floats, so
shape-outside isn't really relevant.
SVG has clipping and masking covered with
and .
SVG has for animating
along a path. But it's part of SMIL.
Slide 109
Slide 109 text
My suspicion of why we've gotten so
much of this stuff in CSS recently is:
1) The popularity of SVG recently.
2) The proposed deprecation of SMIL.
Slide 110
Slide 110 text
No content
Slide 111
Slide 111 text
No content
Slide 112
Slide 112 text
No content
Slide 113
Slide 113 text
WHERE WAS I
Slide 114
Slide 114 text
path {
/* Yes */ d: path("M 200 200 v 20 h -20");
}
polygon {
/* No */ points: polygon("0,0 30,0 20,20 0,20");
/* No */ points: "0,0 30,0 20,20 0,20";
}
circle {
/* Yes */ cx: 40;
/* Yes */ cy: 40;
/* Yes */ r: 20;
}
ellipse {
/* Yes */ rx: 10;
/* Yes */ ry: 10;
}
rect {
/* Yes */ x: 10;
/* Yes */ y: 100;
/* Yes */ width: 300px; /* Weird */
/* Yes */ height: 20px; /* Weird */
}
Slide 115
Slide 115 text
polygon() circle() ellipse() inset() path() url()
shape-outside
offset-path ❌ ❌ ❌ ❌
clip-path
❌
d ~ ~ ~ ~ ~
Slide 116
Slide 116 text
GOSH IT
WOULD BE NICE
Slide 117
Slide 117 text
If shape-outside could use path()
If shape-outside could use url(#fragment)
To know if path() going to stay like it is.
To know what's up with unitless/lengths.
If could use polygon()
WOULD BE NICE
Slide 118
Slide 118 text
BUT
ANYWAY
Slide 119
Slide 119 text
Word on the street is the CSS folks
have a desire to reign all this in.
Slide 120
Slide 120 text
They all tend to work
fairly well with
P
r
o
g
r
e
s
s
I
v
eNHANCEMENT
Slide 121
Slide 121 text
There is a ton of cool stuff we can
do with all these properties and
values now.
Slide 122
Slide 122 text
No content
Slide 123
Slide 123 text
THANKS
Chris Coyier @chriscoyier // CodePen • CSS-Tricks • ShopTalk