When you’re creating 2D and 3D transforms,
or customizing animated state transitions, there’s a lot that goes into this. And this lesson is going to ramp up quickly. We’ll cover opacity, cursors, shadows, transitions
between states, filters, and of course, the different kinds of transforms in 2D and 3D space. Opacity. It makes things translucent. And if you have elements that overlap? Decreasing their opacity decreases their opacity. Lower opacity means you’ll see more behind
the element. That’s opacity. What about CURSORS? [Grimur] Sometimes I’m a curser, but I hold
back so I don’t sound like an a– [McGuire] Ascertaining what the DEFAULT cursor
behavior is for any element can be done by going into Preview. (Here we can test the default, automatic cursor
behavior.) When we hover over a link? We get the pointer. When we hover over text, we get the text thing. But what if we want to override that auto
behavior? With any element selected, we can go to the
cursor dropdown and select something else. When we go into Preview mode to check it out? We can move our cursor over that element,
and the moment it’s inside the element’s boundary, there it is. New cursor. Now. There is one cursor you should use with great
restraint. We are, of course, referring to the None cursor,
which looks like this. A better example is selecting our Body element. We’ll set the cursor in our cursor dropdown
menu. We’ll set it...to none. Now? When someone moves their mouse anywhere inside
the page? [Grímur] Ahh, I can't even see the mouse. This is bulls— [McGuire] Shadows can be applied to almost
anything, so let’s move from Cursors to Box shadows. And these can add visual lift and contrast
to an element...against whatever background you have behind it. And box shadows apply to the element itself
(the box; its boundary). So if you have a heading and you apply a box
shadow? Maybe this...visual style...is your thing,
no judgement. But notice how the shadow’s applied to the
box itself and not each letter. (That’s what text shadows are for.) But things like buttons or cards? We can add a box shadow to anything like this... But notice how we can toggle an inner shadow
...inside the boundary). Let’s switch it back. We can tweak all our properties until we get
our shadow looking the way we want. And something to keep in mind: it might be
tempting (especially on a lighter background color) to set your shadow to a sort of gray
color. But if you’re aiming for a versatile shadow
that gives you flexibility down the road if you end up changing to a DIFFERENT background
color (changing the color behind the button)? A pure black color with a lower opacity is
an excellent way to achieve that look. And it’s consistent across different kinds
of background colors. Now. Here’s an important distinction between
shadows and BORDERS. You can actually style a shadow to LOOK like
a border. You can remove the distance and you can remove
the blur, and set the size to something like 1 pixel. And let’s make this shadow visible INSIDE
the button. Now. Why would we ever do this? Well, because borders can actually affect
the dimensions of an element. And sometimes that’s not what we want. Box shadows are just an effect. Hence their inclusion in the Style panel under
Effects. (You can use a box shadow to create a visual
border.) But over to a different example, here where
we already have a box shadow...we’ll add a second shadow. Dual shadows. Now. There might be some people thinking: “there’s
no such thing as a second shadow. And dual shadows don’t exist.” Well. Objectively, those people are wrong. Because they do exist. And we can add and style additional shadows
(the second shadow can be decorated differently — entirely the way you want it to look). Two separate shadows. And shadows become really interesting when
you add states to them. Let’s look into that. With our button selected, we can choose our
states from the dropdown here, and go over to select Hover. (We’re now styling how the button looks
on hover — when we HOVER over it.) And if we scroll down, we can see BOTH box
shadows we added before. But here’s the key: if we want those box
shadows to move, or blur more, or whatever (if we want these changes we’re making here
to affect what the button does on hover)? Well, we’re in luck. (Since we’re styling on the hover state,
all of these changes affect what the button looks like on hover.) So. Let’s go into Preview mode, and we can see
— the button is styled how we originally styled it, but when we hover? We’re now accessing the style for the hover
state. (BUT...it’s a bit abrupt.) How do we make it BETTER? Let’s transition into transitions. Now. Transitions let us interpolate between states
(they’ll create a smooth transition between None and Hover...again, we can go into the
dropdown and see that, by default, we’re styling None). And None is where we want to add our transitions. So if we go down to transitions, we can add
one. And here’s the big thing about transitions:
we need to select the CSS property we want to transition. In this case, we affected our Box shadow,
so let’s select Box shadow. And by default it’s 200 milliseconds (.2
seconds). If we hover over the button on the CANVAS? We can see our transition in action. In fact, we can slow it down here (maybe we
want half a second; 500 milliseconds). And maybe we want to change the easing curve
on that transition. By default, it’s ease. And, as we know from AP World History, easing
can be expressed visually by comparing something with, say, “linear” motion (a direct path
from Point A to Point B) to something that has easing. Notice how the one that’s easing starts
out slower and ends slower, but accelerates towards the middle of the animation. It’s the same here when we affect easing. We can select the option we want for our transition
(we can tweak the easing curves if we’d like), and we can also test OUT that easing
in a couple ways. We can hit the play button to see it graphed
out...OR... we can hover over our button on the canvas. What about transitioning other properties? Maybe we want to change (let’s go out of
here and go back to our Hover state) — maybe on hover, we want to go down and make a change
to the background color. (Let’s go in and change it so there’s
a different background color on hover.) And once we’ve done that (again, we’re
styling in the Hover state), let’s switch back to None — because as we know, None
is where we add our transitions between states. Again, if we hover over it now? The background color change is abrupt (it’s
instantaneous). That’s because just like the box shadow,
we need to animate that transition (we need to add a transition that affects the Background
color). And it’s the same deal here. Once we select which property we’re aiming
to transition? We can set our timing on it (the amount of
time it’ll take to transition), and we can even go in and adjust the easing curve. Once we’ve matched those properties? (By the way, yours don’t have to match.) This is a design decision more than it’s
a development decision, so of course, do what you feel is best. Maybe 18. Thousand milliseconds. Is that too much time for a color transition? Let’s watch. [Grímur] This is gripping. Perfect. Now a transition works between all states. In fact, if we hover out, it’ll change back
over that same 18 seconds. [McGuire] While we’re waiting, now’s a
great time to mention there are fourteen types of punctuation in the English language. Commas, colons, semi— [Grímur] Semicolons, parentheses, period,
question marks, exclamation marks, apostrophes, quotation marks, brackets, braces, dashes.... [McGuire] Well, that's 12 of them, but we're
out of time. Because that’s transitions. But, what about filters? Here’s a card design that’s just a Div
block with a class applied (the class is Card, but the name doesn’t matter). What matters is each of these cards has the
SAME class applied. So with any of them selected, we’re just
going down and adding a filter. And we can see a bunch from the dropdown. Like blur, which blurs things. Like brightness, which makes things lighter
(or darker). Like contrast... It was quite apparent that we ignored the
principle of show; don’t tell. It was a long droning on, and we realized
that we could just show a single slide that demonstrates each filter simultaneously over
1 second. For our example here, we’ll choose grayscale. And we want these to be 100% gray (we’re
styling None, but we’ll change Hover in a second). And because the same class is applied to all
of these, they’re all grayscale. Let’s head over to our Hover state, and
on hover, we want the color to come back to our images here. So we just modify our Grayscale value (we
just make it 0). What does that look like? Well, we’re styling on Hover, so let’s
hit Escape (now we’re back to None). And it’s grayscale. Hover over any of these cards? Full color. Now. Two questions here. First, can we transition this effect between
None and Hover? Yes. We just go to transitions (add one to our
card), and choose Filter. (This means we’re transitioning the Filter
property.) And now when we hover? 200 millisecond transition. The second question: what’s the difference
between Grayscale and Saturation? When would we use one over another? Saturation goes in both directions. It can decrease color towards 0%, but it can
also go way up and dramatically increase saturation in the other direction. With grayscale? We have control over the first 100% only. And technically it’s inverted (because 0%
saturation is the same as 100% grayscale). But it’s important to remember: whatever
filter we’re using, it affects the entire element (plus any children inside). In our case, since we've been styling this
Div block (this card) and since the image is INSIDE, the image is ALSO greyscale. SHOWN another way, if we’ve put this button
INSIDE the card? Not so colorful. Until we hover. That’s filters. And now for the biggest and best part of this
lesson: 2D and 3D transforms. There’s a lot to cover here, but let’s
start with some of the more unique principles of 2D and 3D on the web. In HTML, browsers interpret, of course, our
x-axis from left to right, and our y-axis from top to bottom. But since this is all based on the industry
standard box model, this is a LITTLE different than a traditional coordinate plane. Because on the web, just like in math, things
on the x-axis INCREASE in value as they move to the right, but, on the web, things along
the Y-AXIS actually increase in value as they move down on the page. So everything is increasing (these values
are pushing off from the top-left of the page). And of course, we have our z-axis. The z-axis is our depth value. The greater the z-axis value, the closer something
appears to the screen. Now. There’s a small asterisk on the screen. And we'll talk about why in a moment. Because to demonstrate why, we need to get
into transforms. With our card here selected, we can see we’re
styling None — and let’s add our first transform. And before we get to Z, let’s affect X for
left and right, and we can use Y for up and down — notice how these changes (even though
the card is moving) — everything inside the card is moving with it. But notice how it’s NOT affecting the rest
of the document (the other things on the page aren’t being pushed around). That’s because transforms (whether it’s
moving, or rotating, or any transform) — transforms don’t mess with the document. They only affect the selected element and
the element’s children. You might also notice that each time we tab
over (each time we switch from something like Rotate to Move), we lose the transform settings
from other tabs. And that’s because transforms need to be
stacked as separate properties (we can have a move AND a rotate), but we need to add the
second property (add the second transform to do both at once). And we can see in the list: we have move and
rotate. Now. What about that asterisk from before? What happened to it? Because on a second watch, it should become
painfully apparent that we skipped past the z-axis when we covered moving things using
transform. Again, this is our depth axis. So. What happens if we move along the z-axis for
something like this card. Well, nothing happens. It does (the value is actually changing behind
the scenes), but it’s not being reflected visually (let’s reset it for a second). And we have a different problem if we try
and rotate again along the x- and y-axes. It’s...not exactly what we might expect
in traditional 3D space (everything’s isometric — of course, isometric projections are totally
valid, but it might not be the style we’re looking to achieve). Because in order to make ALL this happen,
we need to add perspective. Let’s expand our layout. A single section, now we have three cards. Each of them have the same exact class applied. And we’ll cover two ways to add perspective
to a layout like this. (We’ll cover both.) And the first one goes like this: think of
the section here as a sort of the “camera” (the lens through which we’re looking at
the cards.) You can just select the section itself (we
can see in the Navigator that these cards are inside the section — they’re CHILDREN
of the section). And all you have to do to give an element
a 3D effect (to make our cards 3D)? Is set perspective on the parent (the section). (All we have to do is set the Children perspective
on the parent section itself). Now — notice how we’re changing Children
perspective (NOT Self perspective). Let’s do 1000 pixels right now, but we’ll
demonstrate what different values do here in just a moment. First, now that the section has a Children
perspective set, we can select any of the child elements, and actually manipulate stuff
along the z-axis. (We can add a transform, and do something
like moving along the z-axis...moving them closer or farther away.) But we can do more. Let’s switch over and work on rotating. Because now that we’ve added Children perspective
to the Section, manipulating these values (transforming the children elements) lets
us do stuff with these cards in 3D space (with realistic depth). Put a different way? (Let’s demo this with a split screen here)
on the top, this is what happened when we had before we set any perspective — before
we set Children perspective on the card’s parent element. But on the bottom...this is what it looks
like AFTER Children perspective has been set. Isometric effect on the top...more of a perspective
projection on the bottom. But notice something else: these cards? (With the rotation transform we’ve applied?) They’re not identical. And we’re not just talking about the things
inside these cards — look at the actual angles (the edges are different on each card). That’s because you’re seeing the cards
from the perspective of the section (like the section is a camera). As things get towards the edge, they’re
warping more photorealistically (an effect often associated with a wide-angle lens on
a camera). In fact, we can experiment and go back to
demo WHAT the Child perspective value actually changes. So back in our section, let’s go down and
make some live adjustments to the Children perspective now that we’ve set up the transform
on our cards. The higher the value? The flatter things look (like a camera being
farther away from the subject — less exaggerated perspective). But the lower the value? This is like a camera being really close to
the subject. The perspective is exaggerated and the effect
is more dramatic. But what if you want to go REALLY advanced? What if you want to change the origin of that
children perspective? Maybe you don’t want the center of the section
to feel like the center of the perspective? You can adjust that in the transform settings
under Children perspective...and we can see that setting it to top left? Changes our perspective. Top? Top right? We can even manually type in values to change
the position of our perspective origin (basically the center of the lens). Again, we said we’d cover TWO ways to set
perspective. Children perspective set on the Section is
the FIRST way. What about the second way to set perspective? Because if Children perspective can be set
on something like a Section to turn it into camera effect...what do you do for self perspective? [Grímur] I recently downloaded meditation — right into the phone. Like an app. [McGuire] Not now, Grimur. We’re working in 3D. SELF perspective is like turning each element
ITSELF into a mini camera. Check this out: we’re going to remove (we’re
completely resetting our transform properties on the Section so no perspective at all is
set). In fact, notice how, right now, everything
looks flatter and isometric again. But this time? We’ll select any card ITSELF. And on the CARD, we’ll go in and set our
Self perspective. (Again, BEFORE, what we did was set CHILDREN
perspective on the parent element — the section — but now we’re setting Self perspective
on the element — the card class ITSELF). Same thing here. And to really demo this, let’s go in and
affect that rotation a bit more dramatically. What’s different here is this: this time,
the angles are all the same. There’s no difference in the way the left
card looks compared to the center card or the right card. In fact, the perspective is 100% identical
— and it’s like there’s an individual camera pointed at EACH element (each card). Let’s do another comparison here to look
at the difference. On the top, are three cards the FIRST way
we did it (WITH Children perspective set on the SECTION); on the bottom, is the SECOND
way (the same cards, but instead of Children perspective on the Section, they have Self
perspective set on the cards themselves). Two different ways of setting perspective,
two different visual results. Is there a right way or wrong way? Vlad? [Vlad] It’s really...a matter of perspective. Thank you, Vlad. Now this is a lot. And the best way to learn here is to experiment. Because with 3D perspective, you can combine
a lot of the things we’ve talked about this lesson so far. In fact, in this DIFFERENT example here, we
have four cards (again, they all have the same class applied to them), and the Section
here is set to a Children perspective of 1000 pixels, and instead of styling None, let’s go in and affect our transforms on the Hover state. So...in hover, we can go down, add a transform,
and do something straightforward here to show movement (to rotate things slightly). But we can also take it one step further (actually,
we’ll do two things to make this even MORE dramatic). For the first one, let’s go back to None
(once we’ve finished styling the Hover state), and add a bit of a transition here. Again, with transitions, we want to select
the specific property that has the style change (in this case, it’s Transform). And we’ll set our timing to something like
700 milliseconds, and we can go in and choose our easing curve (any of these will work,
but let’s try out how things look). Not bad...if we test what things look like
on hover. But here’s the second thing we can do: let’s
go in and select one of the CHILDREN of our cards. (We already know each CARD has the same class
applied to the image inside.) So let’s select the IMAGE. And we could try moving the image independently. (We’re styling the image in None.) BUT, now that these things have perspective,
we’re able to do additional transforms. So let’s move our image towards us (we’ll
use the z-axis here — we’ll move the image closer). And what does that do? It creates enough separation that when we
hover over the card, we can see that 3D parallax in motion (the image is a child of the card,
so because it’s closer to us now, it rotates WITH the card and gives us an even greater
sense of depth). The possibilities here are limitless. But there’s a bit more to cover that can
be applied to almost all of this — especially rotations. Because (and we can access this part from
the transform settings here...) — because when DEALING with rotations, making the back
of an element visible just means that when you rotate it, the back of it is visible. If it’s hidden? The back is hidden. And that leaves us with our last topic to
cover as part of 2D and 3D transforms: origin. There are two schools of thought: first is
what’s known as the Big Bang, which is a model that describes how the universe expa
— you know what? This is the Wikipedia article on the origin
of the universe. Transform origin describes how an Autobot
named Optimus Prime w— this is the origin STORY for the Transformers franchise. Transform origin (this is the origin listed
under Transform settings) describes where things are transformed FROM. That means if we set it to top-left? 0% from the left; 0% from the top? Any transforms we add to this element will
revolve around THAT origin. Notice how rotating this shows the top-left
as that sort of “anchor point.” That’s what we mean when we say “transform
origin.” And that’s a lot to remember — a lot to
experiment with. So try it out — worst case scenario you
make something so unbelievably destructive that you have to restore from backup. (That’s okay. We all do it. We’ve all been there.) But before we wrap this lesson, let’s reinforce
it and summarize what we’ve covered. We talked about opacity, which didn’t take
long at all. We talked about cursors and people who are
cursers. We covered box shadows (and how we can stack
them), transitions which can animate back and forth going to states like Hover. We covered filters and how you can use them
WITH transitions to create visual effects that can rival such films as The Hurt Locker,
Wonder Woman, and of course, Transformers. We discussed 2D and 3D transforms. (The ability to add things...like moves, scales,
rotations, and skews)...we covered how we can set Children perspective on a parent element
like a section so that the children of that section have a perspective projection that
turns the section into a sort of camera...and of course, we briefly began to cover the origin
of the universe itself. Before realizing, once again, that Stacy printed
out an unrelated document from Wikipedia. That’s an overview of effects in the Webflow
Designer.
