Let's start working on creating our own cool, funky, animated toggle.
All right.
So let's jump back to our text editor here and let's get cracking.
The first thing I want to do, is I want to target our input element that has type of radio.
What I want to do is I want to remove the blue button by default,
right.
How do we do that?
I'm going to affect its appearance property and set that to none.
So now if we go back to the browser.
What?
What 😲?
It's gone.
Well, yes, exactly.
That's what I'm trying to say.
We have to start from scratch.
We have to remove everything, and then build it ourselves.
Let me just put these side by side, so you can see what's going on.
So that's exactly what we've done.
We've removed that toggle.
Well then, how do we build it again?
Well, we've got to start from scratch.
So let's target this input with type radio.
And what can we do?
Well, let's start defining the actual toggle itself.
Let's just say the width is 20 pixels and the height can be 20 pixels.
Border radius ...
should we do border radius?
Yeah, let's do border radius now because we want it to be round.
We don't want it to be square and it will be square by default.
So if we just put an edge to it, it'll look better.
And then let's add a border to it.
Two pixels, solid gray.
What does that look like?
There we go.
At least you can see it.
Now, if I take this border radius radius off.
There we go.
It's a square.
We don't want a square.
We want a nice round toggle button.
Can you see those toggle buttons are not quite aligned to the bottom of the text,
right?
So I want to vertical align.
Vertical-align.
And let's just push it up slightly.
There we go.
How does that look?
At least now they're aligned at the bottom.
All right.
There's something else I want to change.
If we now go to the browser and we start clicking right on this element, can you see the outline?
It just looks ugly, right?
We don't want an outline.
All we have to do with that, is define our outline as none.
Now, if we start toggling, nothing happens.
Okay, that's fine.
This is this is exactly what I expected.
But at least now there's no outline.
Bear with me.
Keep following me.
Okay, so we've defined the circle.
We've defined where we want the toggle to be.
What I want to do now is I want to start building that little red dot.
We have to build it from scratch.
And what I want to use is I want to use the ::before pseudo element.
So what I'm going to do, is input,
I want to target the type radio.
But now I want to target the ::before pseudo element.
And do you know what?
I'm actually going to make this file available to you, to download.
And in that file I'll include comments.
Okay.
I don't want to do the comments now because we're running out of time, but I'll just explain a bit
more why I'm doing each of these things.
And don't worry if you don't know what the ::before pseudo element is.
It's basically just a way for us to add cosmetic content into an element using the content property.
So I'm going to show you now we basically just building that red dot.
Well, the first thing is it's got to be displayed, right?
Otherwise we won't see it.
So let's just set that [display] to block. The content of that dot is just going to be nothing,
okay.
I know it seems very strange, but it's the way we have to do it.
"Let's create the round dot then,
Clyde." Great.
So let's say the dot is 10 pixels wide.
Let's say it's 10 pixels high.
And what else can we do?
Should we do font size? Font size 1em.
Should we do border-radius?
Remember, we want it to be round as well.
So let's do 10 pixels.
Oh, the reason we can't see it, you might be thinking why can't we see it?
We need to set a background color, and let's just do red.
Sorry,
I should have maybe done that before.
Then you could have seen what we were doing.
Um, what else can we do?
Well, maybe.
Let's don't do red.
Maybe we can do, like, a maroon.
There we go.
Now that's ugly.
But brighter.
Yeah, I think that's better.
Okay, now what I want to do, can you see that the dot is inside the circle?
I don't want that to be the case.
All right.
How are we going to adjust the original position of that red dot?
Well, I want it to be pushed slightly to the left.
So let's use the transform property.
And I want to translate this.
Okay.
I want it to be pushed to the left by 30 pixels and let's just say the same height.
Boom 💥
How cool is that?
And then because I want this to animate, I want it to start at zero.
I want its size to be zero.
So if we save this, it's gone.
It's literally gone.
Okay, well, what's next?
Um, man, we've,
we've,
we're doing so well.
Well done for sticking with me.
I want to start one more thing.
At the moment when we check this, nothing happens because this transform, we've set the scale to zero,
but nothing happens.
So what I want to do, I want to style our inputs when it's checked.
That's what I want to do now.
So we're going to be targeting the input of type radio.
You guessed it.
But now we want to target the pseudo class of :checked when it's checked and this automatically gets
applied when a user toggles the button.
And of course we're styling that dot, right.
Which is the ::before pseudo element.
I know this can get quite tricky, so don't worry.
I know this is quite advanced.
I want to access the transform property again.
Let's translate.
Let's just go 0, 0.
Let's just see what happens.
And scale of 1.
Okay.
What happens now when we when we check a box?
Well, let's look.
Okay.
Firstly, it's instantaneously shown, okay.
Because we haven't done a transition properly.
We're going to do that shortly and it's not quite centered, so let's just push it two pixels, 2
pixels to the right. And 3, let's try that.
Perfect.
And then it's going to be the same.
Done, right? Click
banana, cherry, strawberry.
How cool is that?
And then of course, I want this to be animated.
So let's transition this baby.
All right.
And just in case you're wondering, this transition property is a shorthand property for four CSS properties
all in one.
So basically, you've got to define what you're going to target.
We're going to target all items, all CSS properties.
Then it's the duration.
So let's just say it takes 3.3 seconds. And then you can define how the timing function works.
And how can I explain this?
Well, normally what happens is you go to a website, well, let me do it now with you because we cannot
memorize these things.
Here, I've just pasted the [url] link, cubic-bezier.com.
Let's just go on here quickly.
And here we go.
You can play around with how you want your "whatever it is you're dealing with" to animate in.
So here I wanted to kind of start off in a linear fashion, but I want it to be pushed.
I want it to be pushed a lot.
I'll show you the animate now at the end.
So I want it to go really fast and kind of push back into the little toggle box.
So let's just preview that pink one.
That's exactly what I want, exactly what I want. So we can copy this back to our code and paste.
And so let's go back to our site here and let's click on Banana 🍌.
Hey, how cool was it?
How cool was that?
Okay, but you'll notice now,
all right, if we're on Banana and I click on Strawberry, Banana just disappears immediately.
I don't really want that.
I want the transition out to also be done in a nice way.
So on this kind-of call it the red dot, um, the ::before pseudo class, every time its scale changes, I
want a transition to happen.
I don't want it just to disappear automatically.
So all we need to do here again, is add the transform property.
And this we can just, you know, keep it really simple with ease-in,
instead of using that fancy cubic-bezier, we can just use ease-in.
Now, if we click Cherry 🍒, okay, it animates it nicely.
If we click banana 🍌, you'll see the cherry 🍒 dot animate out nicely.
Oh, it doesn't work 🙈. (sad trombone)
Why?
Silly, silly Clyde.
It's not transform, it's transition.
Sorry about that.
Here we go.
The cherry 🍒.
Now we click banana 🍌.
Congratulations.
Oh, man.
How cool is that?
Woo hoo!
How awesome is that?
This is a really nice toggle.
You can see how quick it is
also, once you know, kind-of the basics of CSS, how to create your own cool forms and toggles and
animations.
But already this assignment is getting quite long.
I hope you're learning a lot.
I hope you're having a ton of fun in this course.
I'll see you in the next lecture.