Name: ピラミッドのアニメーション。CSSチュートリアル (30日目のCSS3の20日目) (Animated Pyramid: CSS Tutorial (Day 20 of CSS3 in 30 Days))
Uploaded: 2021-01-14T10:29:11.000Z
Duration: 13 min 1 s
Description: VoiceTubeの動画で発音を聞きながら英語表現を覚えよう！学べる英語：

未来進行形

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

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.

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.

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

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

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

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.

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.

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

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

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

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.

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

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

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

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

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

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.

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.

Save that Now, you can only see that triangle.

字幕リスト動画再生

ピラミッドのアニメーション。CSSチュートリアル (30日目のCSS3の20日目) (Animated Pyramid: CSS Tutorial (Day 20 of CSS3 in 30 Days))

entire

individual

practical

versatile