Today is Day 16 and we're gonna be making motile window in only CSS three motile window.

Is that a pop up window that you see on websites to subscribe to something or to give you a notification on alert of some sort?

It's commonly used in bootstrap and other frameworks like that.

It's just a motile window.

It pops up in front of your screen to to alert you of something or request something of you.

Typically, it's built in JavaScript or J query or the like, which requires you to learn those languages or download a plug in or learn a specific framework, which is not a big deal.

But this course is about making things only in CSS three pushing the boundaries of CSS three or at least pushing your boundaries of what you think CSS three can do.

And in this case, we're gonna just make a motel window on Lian CSS three.

Now what's the benefit of that?

While you don't have to do it in J.

JavaScript urge a query or anything like that.

You don't have to add that extra step, but also This means that if the person viewing your website or your application does not have JavaScript activated or installed or whatever on their browser and sometimes that's the case, then it still will appear because it's only CSS, so that's pretty neat.

Let's jump in and let me show you what that looks like.

Here's the 16 CSS only motile window.

We have the sandbox with our content here, which will turn into the motel window as you could see the close button and such.

But down here in the final result, you can see if we click tow launch motile, it will pop up just like so nice little animation, little background overlay, the body content to some texts and then a close button, which also closes the motel window.

So let's jump into our code editor.

Download 16 motile window.

Give you a moment to do that.

Pause the video.

Come back here when you're ready, check out the index file.

There's a few things that I want to note here and explain because the market is very important in this lesson.

We're not gonna be coating the market, but you need to understand how it works because it's crucial in how the CSS functions in this case.

So let's scroll down here and I will show you we have a input.

The first thing you see her under the H for an input on that input is a check box with the idea of click.

But the style is display none.

So this input makes everything happen.

So we're gonna hide this input because we don't need to see it.

But the state of the input, whether it is checked or unchecked, is what's going to determine if our motile window appears We're not.

The label here wraps in a tag, which is a button, but the label.

It has the attributes of four Click, which is tying into this input right here.

So when we click on this label, so when we click on the button that we're actually clicking the label because that's the parent, it's goingto activate or check slash unchecked.

It will toggle this check box.

Now if I If I, you know, remove this.

Let me just show you removed the style you'll see a check box, and if I click this, it's going to check and uncheck it.

And also this down here is going to do the scene, and that is very important.

So I'm gonna style display none.

So down here we have the dead with the idea of classic motile and just another David, the content and some market.

That's just for styling purposes.

But another functionality element here is the label for Click that is that idea of Click appear that check box and then again, just a button with the class of clothes that toggles that input as well, and then down below that as a sibling of the motile element, we have the dead with the class of overlay, and that would be that black overly that we use.

And really, that is it.

So when you click on the label for I D.

Right here, we click on this button.

It's going to toggle this input when you click on the close button.

It will also talk to the input.

In CSS, we can check to see if oven in put a check box is checked or otherwise, which means weaken style based on that attributes being checked or not, So jump into your final Nazi SS.

If you want to refer to these styles you always can.

As in every lecture, every lesson.

We have a final dust CSS file where you can go through and see.

The only difference is in the final files.

It's going to be pretended with final double underscore and then the class.

And that's simply because the styles the final styles under the final results are on the same page is the sandbox, and I don't want to have conflicting styles and have, when I style one thing style, everything.

So I have a separate class or i d for each of the elements.

But the difference is the final elements.

The final results start with final double underscore.

So that's what you'll see in the final CSS in every lesson.

So that's there for your reference.

As long as you keep in mind the the pre pending a final double underscore.

Now let's jump into our sandbox Nazi SS.

What we're gonna do here is start coding up our style.

So let's the first thing we're gonna do is cut up that overlay and we're simply going to say position fixed top zero and left, right and bottom are all gonna be zero.

That just tells the position fixed element that it's gonna be connected to all four sides because a fixed position kind of jumps it up to the top top left.

So you need to position it specifically, so it knows to stretch itself.

Is that Index 99?

That's just going to put it in front of everything on the page for the most part background we're going to say, I'm gonna go double Triple zero fought black Pointer events, this specific selector, it specifies.

It says, right here, right on.

The code editor specifies under what circumstances, if any, a particular graphic element can become the target of most events.

So our overlay, we don't actually want it to be the target of a mouse event, so we want to be able to click through it.

We don't want it to, to conflict with.

If we want to click something so the the overlay, you can sort of the point of events you can have set to auto or none or any number of different events.

In fact, if you just check here in Mazzella dot org's for the developer page, you can see the syntax of pointer events.

Basically, if you choose auto.

The element behaves as if if, if the pointer events property, we're not specified, it also just default and none.

The element is never the target of most events.

That simply means if you click it, it shouldn't register as anything.

So and we're just doing that for just to prevent any issues with clicking the overlay, being on top of different things, it's very likely we could not have the pointer events style in there at all.

And it would be fine on some browsers.

But we have that in there specifically to to avoid any conflict with click events.

So Pointer events.

None for the overlay because we don't want to be able to have it registered as a click event when we click on it.

Capacity.

Zero.

We don't want to see it.

Web Kitt transform We're gonna scale.

We're gonna make it half the size.

So that scale is 0.5.

We're gonna put this as transform as a browser cross compatibility scale 0.5.

So it's half the size right now, but you can't see it because it's opacity.

A zero.

Now let's move along.

We're going to style the input with the type of checkbox.

So our magical check box, but the checked state of it So that check box with the Czech State, This is the style that we're going to do.

But we're gonna use a general sibling Combinator.

This little character means any sibling of this element, so not necessarily just the adjacent sibling.

So if there's an input and then right below it, that's an adjacent sibling as long as there siblings, in fact, it could be any sibling that I specify within the document tree, not necessarily an adjacent one.

So we're going to select overlay.

So basically one, when the input is checked, I'm actually gonna be selecting the overlay sibling pointer events Auto for this capacity, let's do is your 0.9.

I'm gonna go Web Kitt transform Scaled out toe one.

And I'm going to do that again here.

If across compatibility on the browsers and then we're gonna do is Web kits transition.

We're going thio to transition the transform at 0.5 seconds and ease.

I'm going to transition the opacity as your 0.5 seconds with Annie's coffee that pasted out.

Remove Web Kitt simply for cross compact cross browser compatibility.

That should do that.

Okay, so let's say that and see what happens.

Now if I refresh and I click on click to Launch motile, we have our overlay slides up nice just like so.

But I can't remove it because there's no way for me to remove it.

And that's something that we're actually going to start to do here.

So below that, we're actually going to style the model anniversay position fixed top 50% left, 50% Zetti Next 100.

We're gonna do some web Kitt transform here.

We're gonna translate, which is the X and Y position on the screen.

Can I get a 15 negative 50 and then scale 0.5.

So half the size.

Now, if I save that, we'll see what it looks like so far, so you could see it here.

It's 50% of the size and its negative 50% negativity percent.

If I were to change this 2 50% and 50% and see what happens, it's somewhere down here.

So the negative 15 negative 50 is the eyes, the position of it.

So it's actually right dead center, as you could see, but it's half the size.

We're gonna scale it up once it's activated.

Copy that.

Pace that remove Web kit.

There we go.

We're gonna go here and we're gonna say which and we're gonna do 100%.

And Mac switch 640.

So it's basically always 600 a maximum 6 40 but under that, it will be 100% basically responsive styles, pointer events none.

And opacity zero Beautiful.

Now I'm gonna do is style the motile when the input is checked.

So now it's hidden.

You can't see it.

So now let's do something when you can see it.

Type of checkbox, The checked ST the General Sibling Combinator But we're going to start the motel this time.

Pointer events, auto capacity one we're gonna do Web kitt transform, and we're gonna say, Translate, we're gonna position that.

Uh, it's gonna be the same.

Is this?

So I'm just gonna copy that and paste it out.

But the scale is gonna be one we want.

That too, actually grow to its full size so it doesn't look silly.

And now we're going to do some transitions.

We're gonna transform your 0.5 seconds ease and the opacity at 0.5 seconds and use.

Copy that.

Sorry.

No, I don't need to copy that.

Yes, I do.

For the web kit.

Here we go.

That looks good.

So the transition will transition the transform and the opacity.

So that means that those specific things will animate.

If I didn't specify that it would not affect it would not enemy to the transform or it would not animate the opacity.

You can actually animate the position and other elements as well other states.

And now we're gonna do a transition delay 0.1 seconds.

And now she's gonna wait 0.1 seconds before an enemy.

It's just to give it, like, a little bit of a cascading effect.

And one last thing we're going to just style up the motile double underscore content, and we're gonna say display block.

We're going to give it some padding of 30 pixels and a background of whites or triple F.

Save that.

Check it on the browser refresh.

Click on your click to launch motile.

There it is.

It opens up the motel.

Is there the close button?

If we click, it closes everything back out.

Check this out.

When I click it, Watch that the overlay comes first.

And then at 1.1 seconds later, the motile pops up, so it's very subtle, but check it out.

It just has a nice creepy.

That was very good.

Thank you for hanging out with me on number 16.

Day number 16 Motile window.

I hope you enjoyed it.

Hope this gave you a few ideas to use on your own Web sites and applications.

Perhaps build some CSS only motive windows in your own projects.

It's a very functional thing.

It's something that you can use its cross browser compatible.

It's just C S s.

So it should work everywhere for the most part.

So enjoy.

Have a good day of scene tomorrow and day number 70 by E.