Welcome back to CSS three and 30 days.

Today is day number 20 and we're gonna be making some random animated pyramid.

Let me show you what's going on here.

So I needed an idea for a project to make and I was starting to run out of inspiration.

And I thought, What can we make that's interesting, possibly practical and exercises some CSS three chumps and the best I could come up with in this particular moment was an enemy to triangle.

So here it is, on your journey to see us history mastering.

Spend at least 20 minutes learning how to code a triangle.

Okay, so let me show you before before you skip this video and go do something better with your time.

Um, we have a little triangle here, and when you hover over the triangle, watch what happens.

It's a lot more interesting than what you see on the screens.

Over here we go.

So check it out.

When you hover over this triangle, it creates a bigger triangle with two other layers, and then text appears and the colors change.

So it's actually kind of interesting and super easy to make and it is practical.

So it did check off all the boxes.

Uh, and the way I might think of how you might display this is if you were if you had a piece of text.

Or maybe you offer to service.

Let's say you're a web designer and you're you're building a portfolio website and you wanted to display the service's you offer.

This could say, you know, I'm hiding the text so this could say service is, and then when you hover over service is it splits down and shows the service is that you create that could be images as well.

If you wanted to display maybe like, um, you know, different layers of a project.

If you had, like, the final final project in, like the top part of the triangle and then like the wire frames and then you know, then the sketch below.

I don't know, just coming up with random ideas here, but maybe you have some thoughts on how you might use this, and it's simply three elements that that when you hover over them, they just animate down and appear.

The interesting that's happening here is that they're actually these elements are actually three rectangles.

And I'm not using borders to create a triangle like we did in a previous lesson just a couple days ago, I'm actually clipping the entire element.

So this whole thing is wrapped in an element called triangle and triangle is clipped to accustom shape that I created of a triangle.

Now let me show you in the code editor, What is going on?

So you know what I'm talking about.

So go ahead and download 20 animated Pyramid and fired up in your code editor.

And let's get started here in index and I'll show you the market.

Look simply like this David, the class of triangle wrapping three individual dibs with the class of top, mid and bottom and then text within each of the dibs.

That's it.

Now what we're going to do in our sandbox is simply style those up, clip it and transition.

It's really quite simple.

So let's just get started here in the sandbox.

We're gonna get started and we're just going to style up the triangle triangle is gonna have a position of a relative height of 320 pixels.

That is the total height of of the triangle when it's done, and Ah, and I'm gonna leave the clip path for now.

We're gonna start with just rectangles and we'll do the shape after So you know what's going on?

Triangle on dibs were selecting the dibs within the triangle and those of the three individual lives.

Background red with 100% height, 100 pixels will start with the bare bones.

Here.

We're gonna go margin zero auto and color white for the text just so you can see everything.

Let's give them a little space just so you can see Ah, margins here, auto and then 10 pixels on the bottom Just for now.

So you can see there we go with three three red triangles.

Now let this shape is not only a rectangle, but can sometimes be a triangle.

Let's tighten up the text a little bit.

We're going to say line height, 100 line height, 100 pixels.

So it's vertically centered.

Textile line center font size 0.8 em.

We save that.

Refresh it.

So now we have top middle and bottom.

So we have the three rectangles.

Let me show you what happens when im ask the entire element with a clip path.

So now watch.

This is where the magic comes in.

So we're gonna say up in triangle clip path, We're gonna do polygon.

And here's that work.

So we did have a lesson on creating custom shape.

So if you wanna underst If you forgot how this works, go back to that lesson grating custom shapes using clip path on.

Then you'll understand how these co ordinates work.

But let's start here.

So we're gonna have three comma separated couples of values.

So let me let me show you how this works.

So we have 50% and zero, so if I leave it at that, we'll see what happens.

You can't see anything because we need other co ordinates.

So comma separate the next two values 20% and 100%.

See that?

See what happens.

Still can't see anything.

OK, and now we're gonna do one more 80% and 100% save that.

We'll see what happens now.

There's your triangle.

The end result of the shape you see, that's a mask, so you can only see what's within this window.

Now if I change these values, you can customize the shape.

So if I said like 50% there, it looks like this, you know, 10%.

It's actually got a longer left side.

So if I were to say zero, this might help you understand.

So that's 0% mark on the X axes.

Yes, and then if I move that over 20% it's actually going in 20% and then 100% would be changed.

That too, like 80%.

It's actually now.

It's on the Why axes.

It's on the vertical axis of y axes.

If I'm if I'm not mistaken.

And so now it's 80% down from the top.

But if I want it 100% down from the top, it's gonna give me that perfect shape.

You can have it any shape you really want.

You could make it really wonky looking sheep like that if you want this kind of neat.

But I'm just going for a perfect triangle, which is 50% in from the top left and zero so saying on the zero uh, up here that on the y axes and then you got 20% in and then you got 100% down and then 80% in and 100% down creates the triangle Beauty Love it.

Now let's hide those to the mid and bottom.

Ah, shapes, rectangles.

You can call them polygons and hide them up at the top and then show them on hover.

So now what we're gonna d'oh is we're going to position absolute the triangle, def.

We're gonna say top zero where I was gonna hide the text.

So the color of the Texas gonna be red and we're gonna remove that margin.

Auto 10.

It's just gonna margins your auto.

So there we go.

Save that Now, you can only see that triangle.

So now we're in the right place.

But when we hover, nothing happens because we're not telling it to do anything.

So what we're gonna do now is we're gonna say down here triangle hover.

So on hover of the triangle of the tri INGE, the word triangle is versatile and can also be pronounced triage Div Color white.

So all the colors of all the desert me white and now all the mid and the bottom are gonna be separate positions.

So So all we need to do is move the position of the of those elements separately.

I don't wantto have them both Be like, you know, top 100 pixels.

Because what's gonna happen is they're all just gonna move down to there.

It is really, really weird.

So we only want the middle in the bottom ones to move.

So now we're gonna say Tarai angle hover, and then the class of mid.

So we're selecting mid.

We're gonna move it down, see if I moved 100 pixels to see what happens.

And let's change the background while we're happening while we're here to green.

So let's see what happens.

So you see, mid and still the top.

But it's actually the bottom one is hiding up there because the set index So we're actually gonna fix this really quickly.

So the reason why I'm what I'm going to do now is bottom is, is is here.

We could see it within this clip path, and mid is actually working.

There's no gap there will fix that, But I want to fix thes et index of the top.

So let's actually go here.

Ah, before the hovers.

So we're going to say just top Zet index one that should just put it in front of everything.

So top is the one that you always see so that when it animates, the top is always in the front when the other one's slide out behind it rather than the other ones sliding out in front of it, which would look just a little off.

Okay, and now let's see.

Where was I?

Let's go back to our triangle, hover mid and move it down 100 and 10 pixels cause I want that gap in between them like that.

Cool, Kate.

And now the other thing we need to do is I'm gonna copy this.

I'm gonna pace it, change it to bottom.

Now we need to move it down.

220 pixels because we're going down.

Another 100 pixels change the color to blue.

Save that refresh.

Hover.

Now your triangle appears, but it doesn't look very exciting because it's just appearing.

And that's not actually doesn't have any meaning to the to the you know, the functionality.

And it's just weird.

It's quite off putting.

So all we have to do now is actually under the Triangle Div style say transition.

So it's not a true animation is actually just a transition.

We're gonna transition all of the things that could be transitioned.

So position, color, um, background, You know, heights, anything that we change will transition with an ease at 0.6 seconds.

Save that refresh.

Now try.

So there we go.

That looks looks good.

And that's it.

Now let me just show you.

Actually, why did this tops that Index one?

I'm gonna take that out and show you when I have her.

Now, without that, you see how they're the color.

These ones are coming from the top.

They're coming from in front of the element.

Maybe I didn't really slow like, six seconds.

You'd see it watch.

See how its bottom and mid they're coming out from in front of top.

I don't actually want that.

I wanted to slide out from C I want It's a slide out from behind.

So by having that Zet index and let's do six seconds again, it looks more like this.

They slide out from under like that.

That's a bit more of what I want.

And maybe what I want to do is actually give mid.

Is that a Knicks in front of bottom so it doesn't so bottom doesn't slide out in front of mid.

Okay, so let's say mid well, just like this mid, it gets a set index of one and top gets.

Is that index of to save that?

Now watch.

There we go now.

Bottom slides behind mid, mid size, behind top.

That's exactly what we're looking for us to go back to our 0.6 2nd transition.

Now try it.

That looks clean.

We go and that's it.

That's Ah, that's it for today's animated pyramid project.

Now the way you might use this is totally up to you, depending on your project on your website.

Maybe it's a portfolio thing and you're displaying information.

There's lots of interesting things you could do.

You can use different shapes.

You don't have to use a triangle.

You can use a circle.

You can have more elements that slide out.

There's lots of different ideas that you can do.

So maybe that give you some ideas.

Maybe that kind of made you think of a few different things.

Ah, either way, you got to spend ah, 10 or 15 minutes with me making an animated triangle.