Name: スライディングパネル。CSS チュートリアル (30日目のCSS3の25日目) (Sliding Panels: CSS Tutorial (Day 25 of CSS3 in 30 Days))
Uploaded: 2021-01-14T10:30:54.000Z
Duration: 13 min 9 s
Description: VoiceTubeの動画で発音を聞きながら英語表現を覚えよう！学べる英語：

Hey, everybody, welcome back to see us as three and 30 days.

未来進行形

Today's day number 25 we're gonna be coding up some sliding CSS three panels.

In our final result, I basically just have an image.

And when you hover over that image, bam on elements slides into frame with some text.

So this one sliding from the top when you slide when you have her back out, it slides back out of the frame, sliding from the right, sliding from the bottom and sliding from ville left.

So maybe already you have some ideas of how you might want to use this.

The fact is, in CSS three, it's incredibly easy to code this up.

Typically, you'd use a plug in or you write some JavaScript urge a query to achieve this effect.

But in CSS three, like I said, it's incredibly easy.

It's slim and lightweight, and I'm gonna show you how to do that right.

And now, So up here in the sandbox, you'll see what we're gonna be working with is an image with some text above that, and we're gonna hide that text into an element.

We're gonna slide that in from the top bottom left and right over here in a code editor.

Go ahead and download 25 sliding panels and get a cute up in your favorite code editor.

And here in our index dot html, let me just show you the markup.

We have a section with a Level four heading that says Slide from Top.

That's just telling you what each section will include.

It's this element that matters to you in here, the David, the class of slide and then slide top right, bottom and left, respectively.

Within that day, we have a different class of slide content and some texts, and then an image with the source of a placeholder image that I pulled from place.

I am g dot com, and that's a free place holder Web site.

You can use that for your own place holders.

I'm using that in this project, and again, you can put any image you want in there.

It doesn't really matter, doesn't have to be an image.

It can be content, so let's get started over here in our sandbox.

I'm gonna go position, relative display in line, block and overflow hidden.

That's because we want that elements on the inside of slide to be out of you when it's not within that frame.

And now we're gonna say slide and then image we're gonna say display in line block.

This one's gonna be vertical align middle, and that's going to align that image within the middle of the element.

If you're uncertain about how a style works, whether in this video or any of the videos or just in your projects, take it out.

Reverse engineer the work that you create.

So if you don't know what this specific property does, then remove it and see how it effects the output and then added back in, modify the values and see an experiment.

That's how I learned as a Web developer as I started building more more projects.

So and that's how I encourage you to also learn how to understand CSS properties and values.

Now we're gonna jump in and maybe let's just see what that looks like if it does anything, so over here, in our final result in the sandbox, Rather, you're going to see that it doesn't actually do anything so far because we're not telling it to do anything specific.

We're not actually modifying it too much.

But let's move on to the class of slide dash content and we're gonna say position absolute, because we're gonna move that content.

The content is that pink box that's gonna slide in and out or is a top zero left zero right zero and bottom zero.

So each side is anchored to every respective side.

If that makes sense with for 100% height 100% we just want to make this expand to the full size of its parent element slide.

And now what we want to do is give it a set index of one.

So it's just in front of everything we're going to use flex box here, display flex A line items.

This is a flex box property flex bucks based properties.

We're gonna line the items center, justify the content center and then textile line center just covering our bases here I see this looks like so far.

So this is what it's starting to look like.

It's dead center fire to remove the last few properties here.

You can't really see any change when I take out flex.

But watch if I took flex out and tried a line item center, it's not going to do that.

It's not going to vertically aligned that.

But if I go display, flex those that a line items is now gonna work nice, I like it.

Typically in the past, you have to make it display table and then have another element within there that says Display table cell and then vertical line middle.

But this is way more lean using flex box, and it's better.

It's better to use flex box rather than trying to go back to old school CSS table technology.

Our rights, especially the stables, are used for data.

Where's flex boxes specifically for visual modification?

All right, now let's keep going, and I'm gonna say padding on, uh, whoops.

I want to give it a background color action.

I want to see that background pink color.

So to 25 comma 35 69 0.9 a little bit to see through.

And then we're gonna give it a padding of 20 pixels so that it doesn't over.

So doesn't go out into the edge of the parent, the text color to be white.

And I want to give it a box size box sizing of border box because that padding I don't wanna have it be 100% wide, plus 20 pixels.

I just wanted to be 100% and the padding within it I write transition, transform 0.3 seconds and then ease.

So that's going to transition to transform property that we that we did we add transform property yet?

But now what I wanna do is hide it and then have it slide in when I hover.

So now I'm gonna say, slide, hover, and then I want to say slide dash content.

So now I'm gonna do is they transform translate And the translate value allows us to position where we want to see this animation So zero and zero Now what that means is upon hover I wanted to go to zero and zero that's X and Y But here, let's say directions now I don't want to do is say slide dash top and then slide dash contents from specifically styling the slide top element here and I'm going to say transform, translate.

I'm specifically targeting each, uh each element.

Now I want to translate zero and negative 100% save that that's gonna move it up 100% of its size, its height.

You just see the image of the cat hover slides down just like that.

Because the animation is much more smooth that goes by points of pixels rather like fractions of pixels rather than one pixel to pixel three pixel.

And it's a lot smoother oven animation, especially when you have like a retina screen and you have really high.

Ah, really nice video card and all of that sort of stuff.

Using translators better for animations versus using position for animation.

Let me make this animation go really, really slow.

字幕リスト動画再生

スライディングパネル。CSS チュートリアル (30日目のCSS3の25日目) (Sliding Panels: CSS Tutorial (Day 25 of CSS3 in 30 Days))

incredibly

content

negative

typically