WEBVTT 0 00:00.410 --> 00:04.400 Let's start working on creating our own cool, funky, animated toggle. 1 00:04.430 --> 00:05.090 All right. 2 00:05.090 --> 00:09.440 So let's jump back to our text editor here and let's get cracking. 3 00:09.470 --> 00:16.790 The first thing I want to do, is I want to target our input element that has type of radio. 4 00:19.010 --> 00:24.110 What I want to do is I want to remove the blue button by default, 5 00:24.620 --> 00:25.220 right. 6 00:25.460 --> 00:26.720 How do we do that? 7 00:26.750 --> 00:30.470 I'm going to affect its appearance property and set that to none. 8 00:30.500 --> 00:32.450 So now if we go back to the browser. 9 00:32.600 --> 00:33.170 What? 10 00:33.200 --> 00:33.860 What 😲? 11 00:33.890 --> 00:34.790 It's gone. 12 00:36.290 --> 00:37.430 Well, yes, exactly. 13 00:37.430 --> 00:38.360 That's what I'm trying to say. 14 00:38.360 --> 00:39.550 We have to start from scratch. 15 00:39.560 --> 00:42.530 We have to remove everything, and then build it ourselves. 16 00:42.560 --> 00:45.770 Let me just put these side by side, so you can see what's going on. 17 00:46.490 --> 00:47.660 So that's exactly what we've done. 18 00:47.660 --> 00:49.790 We've removed that toggle. 19 00:49.790 --> 00:51.560 Well then, how do we build it again? 20 00:51.560 --> 00:53.480 Well, we've got to start from scratch. 21 00:53.480 --> 00:57.050 So let's target this input with type radio. 22 00:57.990 --> 00:59.020 And what can we do? 23 00:59.040 --> 01:02.350 Well, let's start defining the actual toggle itself. 24 01:02.370 --> 01:08.430 Let's just say the width is 20 pixels and the height can be 20 pixels. 25 01:09.990 --> 01:11.250 Border radius ... 26 01:11.640 --> 01:12.400 should we do border radius? 27 01:12.420 --> 01:15.190 Yeah, let's do border radius now because we want it to be round. 28 01:15.210 --> 01:18.480 We don't want it to be square and it will be square by default. 29 01:18.480 --> 01:20.910 So if we just put an edge to it, it'll look better. 30 01:21.240 --> 01:23.040 And then let's add a border to it. 31 01:23.070 --> 01:25.150 Two pixels, solid gray. 32 01:25.170 --> 01:25.960 What does that look like? 33 01:25.980 --> 01:26.470 There we go. 34 01:26.490 --> 01:27.240 At least you can see it. 35 01:27.240 --> 01:30.300 Now, if I take this border radius radius off. 36 01:30.600 --> 01:31.260 There we go. 37 01:31.260 --> 01:32.010 It's a square. 38 01:32.040 --> 01:33.750 We don't want a square. 39 01:34.840 --> 01:37.210 We want a nice round toggle button. 40 01:37.270 --> 01:42.520 Can you see those toggle buttons are not quite aligned to the bottom of the text, 41 01:42.520 --> 01:42.790 right? 42 01:42.820 --> 01:45.440 So I want to vertical align. 43 01:45.460 --> 01:48.280 Vertical-align. 44 01:49.290 --> 01:51.570 And let's just push it up slightly. 45 01:51.570 --> 01:52.260 There we go. 46 01:52.290 --> 01:53.190 How does that look? 47 01:53.250 --> 01:54.780 At least now they're aligned at the bottom. 48 01:54.990 --> 01:55.590 All right. 49 01:55.680 --> 01:56.910 There's something else I want to change. 50 01:56.910 --> 02:03.450 If we now go to the browser and we start clicking right on this element, can you see the outline? 51 02:03.480 --> 02:05.000 It just looks ugly, right? 52 02:05.010 --> 02:06.420 We don't want an outline. 53 02:06.420 --> 02:10.140 All we have to do with that, is define our outline as none. 54 02:10.350 --> 02:13.210 Now, if we start toggling, nothing happens. 55 02:13.230 --> 02:14.370 Okay, that's fine. 56 02:14.370 --> 02:16.200 This is this is exactly what I expected. 57 02:16.200 --> 02:17.910 But at least now there's no outline. 58 02:18.180 --> 02:18.720 Bear with me. 59 02:18.720 --> 02:19.170 Bear with me. 60 02:19.200 --> 02:19.960 Keep following me. 61 02:19.980 --> 02:22.530 Okay, so we've defined the circle. 62 02:22.530 --> 02:24.870 We've defined where we want the toggle to be. 63 02:24.900 --> 02:29.010 What I want to do now is I want to start building that little red dot. 64 02:29.040 --> 02:30.420 We have to build it from scratch. 65 02:30.420 --> 02:35.130 And what I want to use is I want to use the ::before pseudo element. 66 02:35.130 --> 02:37.710 So what I'm going to do, is input, 67 02:37.710 --> 02:41.040 I want to target the type radio. 68 02:41.650 --> 02:46.630 But now I want to target the ::before pseudo element. 69 02:46.630 --> 02:47.920 And do you know what? 70 02:47.920 --> 02:51.910 I'm actually going to make this file available to you, to download. 71 02:51.910 --> 02:53.740 And in that file I'll include comments. 72 02:53.770 --> 02:53.950 Okay. 73 02:53.950 --> 02:57.580 I don't want to do the comments now because we're running out of time, but I'll just explain a bit 74 02:57.580 --> 03:00.460 more why I'm doing each of these things. 75 03:00.460 --> 03:03.580 And don't worry if you don't know what the ::before pseudo element is. 76 03:03.580 --> 03:12.250 It's basically just a way for us to add cosmetic content into an element using the content property. 77 03:12.250 --> 03:16.120 So I'm going to show you now we basically just building that red dot. 78 03:16.150 --> 03:18.760 Well, the first thing is it's got to be displayed, right? 79 03:18.760 --> 03:19.750 Otherwise we won't see it. 80 03:19.750 --> 03:25.450 So let's just set that [display] to block. The content of that dot is just going to be nothing, 81 03:25.450 --> 03:26.230 okay. 82 03:26.230 --> 03:30.610 I know it seems very strange, but it's the way we have to do it. 83 03:30.610 --> 03:31.870 "Let's create the round dot then, 84 03:31.870 --> 03:32.650 Clyde." Great. 85 03:32.650 --> 03:35.440 So let's say the dot is 10 pixels wide. 86 03:35.710 --> 03:38.230 Let's say it's 10 pixels high. 87 03:38.800 --> 03:40.450 And what else can we do? 88 03:40.480 --> 03:45.860 Should we do font size? Font size 1em. 89 03:46.310 --> 03:47.840 Should we do border-radius? 90 03:48.140 --> 03:50.090 Remember, we want it to be round as well. 91 03:50.090 --> 03:51.500 So let's do 10 pixels. 92 03:51.530 --> 03:53.870 Oh, the reason we can't see it, you might be thinking why can't we see it? 93 03:53.900 --> 03:57.710 We need to set a background color, and let's just do red. 94 03:58.590 --> 03:59.010 Sorry, 95 03:59.010 --> 04:00.090 I should have maybe done that before. 96 04:00.120 --> 04:01.650 Then you could have seen what we were doing. 97 04:02.670 --> 04:04.530 Um, what else can we do? 98 04:04.580 --> 04:04.890 Well, maybe. 99 04:04.890 --> 04:05.820 Let's don't do red. 100 04:05.820 --> 04:07.650 Maybe we can do, like, a maroon. 101 04:07.890 --> 04:08.820 There we go. 102 04:10.310 --> 04:11.210 Now that's ugly. 103 04:11.480 --> 04:12.570 But brighter. 104 04:12.590 --> 04:14.150 Yeah, I think that's better. 105 04:14.420 --> 04:18.320 Okay, now what I want to do, can you see that the dot is inside the circle? 106 04:18.320 --> 04:20.870 I don't want that to be the case. 107 04:29.620 --> 04:30.520 All right. 108 04:31.060 --> 04:34.330 How are we going to adjust the original position of that red dot? 109 04:34.360 --> 04:36.610 Well, I want it to be pushed slightly to the left. 110 04:37.090 --> 04:39.700 So let's use the transform property. 111 04:41.260 --> 04:42.880 And I want to translate this. 112 04:42.910 --> 04:43.680 Okay. 113 04:43.690 --> 04:47.980 I want it to be pushed to the left by 30 pixels and let's just say the same height. 114 04:48.010 --> 04:48.930 Boom 💥 115 04:48.940 --> 04:50.770 How cool is that? 116 04:50.920 --> 04:55.660 And then because I want this to animate, I want it to start at zero. 117 04:55.690 --> 04:57.580 I want its size to be zero. 118 04:57.580 --> 04:59.080 So if we save this, it's gone. 119 04:59.080 --> 05:00.520 It's literally gone. 120 05:00.730 --> 05:02.050 Okay, well, what's next? 121 05:02.260 --> 05:04.240 Um, man, we've, 122 05:04.240 --> 05:04.560 we've, 123 05:04.570 --> 05:05.530 we're doing so well. 124 05:05.830 --> 05:07.410 Well done for sticking with me. 125 05:07.420 --> 05:08.560 I want to start one more thing. 126 05:08.560 --> 05:15.220 At the moment when we check this, nothing happens because this transform, we've set the scale to zero, 127 05:15.220 --> 05:16.270 but nothing happens. 128 05:16.270 --> 05:23.470 So what I want to do, I want to style our inputs when it's checked. 129 05:24.410 --> 05:25.390 That's what I want to do now. 130 05:25.400 --> 05:29.750 So we're going to be targeting the input of type radio. 131 05:29.780 --> 05:30.650 You guessed it. 132 05:33.260 --> 05:39.740 But now we want to target the pseudo class of :checked when it's checked and this automatically gets 133 05:39.740 --> 05:42.110 applied when a user toggles the button. 134 05:42.470 --> 05:45.220 And of course we're styling that dot, right. 135 05:45.230 --> 05:47.240 Which is the ::before pseudo element. 136 05:48.020 --> 05:51.020 I know this can get quite tricky, so don't worry. 137 05:51.050 --> 05:52.550 I know this is quite advanced. 138 05:52.820 --> 05:55.670 I want to access the transform property again. 139 05:57.200 --> 06:00.080 Let's translate. 140 06:00.260 --> 06:01.600 Let's just go 0, 0. 141 06:01.610 --> 06:03.140 Let's just see what happens. 142 06:03.620 --> 06:05.480 And scale of 1. 143 06:05.540 --> 06:05.750 Okay. 144 06:05.750 --> 06:09.200 What happens now when we when we check a box? 145 06:09.200 --> 06:10.100 Well, let's look. 146 06:10.700 --> 06:11.180 Okay. 147 06:11.210 --> 06:14.090 Firstly, it's instantaneously shown, okay. 148 06:14.090 --> 06:15.590 Because we haven't done a transition properly. 149 06:15.590 --> 06:21.710 We're going to do that shortly and it's not quite centered, so let's just push it two pixels, 2 150 06:21.710 --> 06:25.250 pixels to the right. And 3, let's try that. 151 06:25.280 --> 06:26.000 Perfect. 152 06:26.000 --> 06:27.050 And then it's going to be the same. 153 06:27.050 --> 06:29.120 Done, right? Click 154 06:29.120 --> 06:31.640 banana, cherry, strawberry. 155 06:32.510 --> 06:33.470 How cool is that? 156 06:33.470 --> 06:36.650 And then of course, I want this to be animated. 157 06:36.860 --> 06:39.500 So let's transition this baby. 158 06:40.350 --> 06:41.570 All right. 159 06:41.910 --> 06:48.960 And just in case you're wondering, this transition property is a shorthand property for four CSS properties 160 06:48.960 --> 06:49.750 all in one. 161 06:49.770 --> 06:51.960 So basically, you've got to define what you're going to target. 162 06:51.990 --> 06:55.970 We're going to target all items, all CSS properties. 163 06:55.980 --> 06:57.570 Then it's the duration. 164 06:57.570 --> 07:04.800 So let's just say it takes 3.3 seconds. And then you can define how the timing function works. 165 07:05.160 --> 07:07.610 And how can I explain this? 166 07:07.620 --> 07:14.160 Well, normally what happens is you go to a website, well, let me do it now with you because we cannot 167 07:14.160 --> 07:15.600 memorize these things. 168 07:15.840 --> 07:19.020 Here, I've just pasted the [url] link, cubic-bezier.com. 169 07:19.650 --> 07:20.940 Let's just go on here quickly. 170 07:22.340 --> 07:23.060 And here we go. 171 07:23.060 --> 07:27.980 You can play around with how you want your "whatever it is you're dealing with" to animate in. 172 07:28.700 --> 07:34.580 So here I wanted to kind of start off in a linear fashion, but I want it to be pushed. 173 07:34.580 --> 07:36.620 I want it to be pushed a lot. 174 07:38.520 --> 07:40.860 I'll show you the animate now at the end. 175 07:40.860 --> 07:45.710 So I want it to go really fast and kind of push back into the little toggle box. 176 07:45.720 --> 07:47.700 So let's just preview that pink one. 177 07:47.910 --> 07:54.330 That's exactly what I want, exactly what I want. So we can copy this back to our code and paste. 178 07:55.260 --> 07:58.980 And so let's go back to our site here and let's click on Banana 🍌. 179 08:00.050 --> 08:02.030 Hey, how cool was it? 180 08:02.990 --> 08:03.920 How cool was that? 181 08:03.950 --> 08:05.530 Okay, but you'll notice now, 182 08:05.540 --> 08:10.910 all right, if we're on Banana and I click on Strawberry, Banana just disappears immediately. 183 08:10.910 --> 08:11.930 I don't really want that. 184 08:11.930 --> 08:17.180 I want the transition out to also be done in a nice way. 185 08:17.300 --> 08:25.580 So on this kind-of call it the red dot, um, the ::before pseudo class, every time its scale changes, I 186 08:25.580 --> 08:28.280 want a transition to happen. 187 08:28.280 --> 08:30.500 I don't want it just to disappear automatically. 188 08:30.500 --> 08:35.060 So all we need to do here again, is add the transform property. 189 08:35.060 --> 08:39.950 And this we can just, you know, keep it really simple with ease-in, 190 08:40.520 --> 08:44.930 instead of using that fancy cubic-bezier, we can just use ease-in. 191 08:45.380 --> 08:49.670 Now, if we click Cherry 🍒, okay, it animates it nicely. 192 08:49.670 --> 08:53.330 If we click banana 🍌, you'll see the cherry 🍒 dot animate out nicely. 193 08:54.710 --> 08:55.820 Oh, it doesn't work 🙈. (sad trombone) 194 08:55.850 --> 08:56.300 Why? 195 08:56.330 --> 08:57.650 Silly, silly Clyde. 196 08:57.650 --> 09:00.820 It's not transform, it's transition. 197 09:02.480 --> 09:03.920 Sorry about that. 198 09:05.420 --> 09:05.900 Here we go. 199 09:06.600 --> 09:07.430 The cherry 🍒. 200 09:08.000 --> 09:09.230 Now we click banana 🍌. 201 09:09.260 --> 09:10.500 Congratulations. 202 09:10.520 --> 09:10.850 Oh, man. 203 09:10.880 --> 09:11.660 How cool is that? 204 09:12.050 --> 09:12.560 Woo hoo! 205 09:12.740 --> 09:14.000 How awesome is that? 206 09:14.000 --> 09:15.350 This is a really nice toggle. 207 09:15.350 --> 09:16.340 You can see how quick it is 208 09:16.340 --> 09:22.910 also, once you know, kind-of the basics of CSS, how to create your own cool forms and toggles and 209 09:22.910 --> 09:23.600 animations. 210 09:23.600 --> 09:26.120 But already this assignment is getting quite long. 211 09:26.120 --> 09:27.200 I hope you're learning a lot. 212 09:27.200 --> 09:29.410 I hope you're having a ton of fun in this course. 213 09:29.420 --> 09:31.160 I'll see you in the next lecture.