WEBVTT

00:00:07.470 --> 00:00:10.720
All right now let's style our books is when they are active.

00:00:10.980 --> 00:00:15.510
So when we click on a box we can see lots first of all the shadow disappears.

00:00:15.660 --> 00:00:16.330
OK.

00:00:16.350 --> 00:00:23.970
And also the position of the box goes down a little bit so that it covers the original space occupied

00:00:23.970 --> 00:00:31.660
by the shuttle which means that it goes down by four pixels the vertical value of our original shadow

00:00:32.490 --> 00:00:40.710
so to style the boxes is when they see if we are going to access the valks glass.

00:00:42.030 --> 00:00:43.430
OK.

00:00:44.400 --> 00:00:52.260
And then call on active and just make sure that there is no space between Conan and text.

00:00:52.260 --> 00:00:55.890
So first of all the books shadow property is going to change.

00:00:56.140 --> 00:00:57.110
OK.

00:00:57.480 --> 00:01:00.590
So both values this time are going to be zero.

00:01:01.260 --> 00:01:02.600
OK we can do the color.

00:01:02.880 --> 00:01:09.330
And also to make the box go down by 4 pixels.

00:01:09.490 --> 00:01:19.470
We're going to use the top position or the top property but we're going to set to four pixels but we're

00:01:19.470 --> 00:01:25.670
going to need to give our box a position of relative.

00:01:26.600 --> 00:01:27.520
OK.

00:01:27.570 --> 00:01:32.980
So it's like the box actually is moving relative to its original position.

00:01:33.410 --> 00:01:33.920
OK.

00:01:34.320 --> 00:01:39.000
So let's try this.

00:01:39.300 --> 00:01:47.810
We can see that the box goes down by 4 pixels and the shadow disappears on us.

00:01:48.300 --> 00:01:56.920
If we look at the final page we will see that's the box when we click on it it takes some time.

00:01:57.000 --> 00:02:02.710
Can we can see a transition effects before it goes down.

00:02:02.730 --> 00:02:03.720
All right.

00:02:03.720 --> 00:02:07.600
So you're going to do going to use a transition property.

00:02:09.100 --> 00:02:10.330
OK.

00:02:11.220 --> 00:02:18.510
Like we did before in the first projects the prop they're going to be looking us here is going to be

00:02:18.510 --> 00:02:20.610
both the box shadow.

00:02:20.970 --> 00:02:21.590
OK.

00:02:21.960 --> 00:02:27.420
And the top position but we can just go for all which means that we're looking at all the properties

00:02:27.420 --> 00:02:33.590
of that specific item OK for the duration we're going to go for point two seconds.

00:02:33.630 --> 00:02:34.940
OK.

00:02:35.940 --> 00:02:41.660
And we're not going to specify any timing function of Ueno because it's optional right.

00:02:41.790 --> 00:02:48.120
So now when we click on the box is refresh the save and refresh.

00:02:48.130 --> 00:02:54.300
Can you see this transition effects.

00:02:55.500 --> 00:02:57.660
And I can see the position effect.

00:02:58.040 --> 00:02:59.810
OK.

00:03:00.240 --> 00:03:06.220
One important point like we did in the previous projects we're going to need to add a few more lines

00:03:06.220 --> 00:03:07.520
for the transition property.

00:03:07.860 --> 00:03:11.030
OK for cross-browser compatibility.

00:03:11.880 --> 00:03:17.180
And we're going to add something just before the transition Wed.

00:03:17.310 --> 00:03:20.630
So we're going to have kids.

00:03:20.910 --> 00:03:22.470
Okay.

00:03:23.540 --> 00:03:27.900
And then was when was the lower and

00:03:31.110 --> 00:03:32.600
for Oprah

00:03:36.120 --> 00:03:37.100
and miss

00:03:40.860 --> 00:03:49.140
for instance is explorer and it's okay for the books Chido we need to do the same thing but only for

00:03:49.200 --> 00:03:57.780
Safari and Mozilla so wherever we used book Shadow we need to add a couple of lines one for Safari and

00:03:57.780 --> 00:03:59.470
one for Mozilla.

00:03:59.610 --> 00:03:59.910
OK

00:04:02.900 --> 00:04:04.790
so I'm going to do it for the first one.

00:04:05.180 --> 00:04:06.570
OK.

00:04:06.720 --> 00:04:09.000
And then we're going to pose and wait for the other ones.

00:04:09.000 --> 00:04:12.290
Make sure we do the same on your own so.

00:04:12.650 --> 00:04:21.720
So I'm going to add this one for and this one way tickets for Safari.

00:04:22.440 --> 00:04:23.380
OK.

00:04:23.820 --> 00:04:27.710
So now I've got these couple of lines added to all my books shadow properties.

00:04:27.750 --> 00:04:29.560
OK.

00:04:29.960 --> 00:04:32.130
OK so just make sure that you do the same.

00:04:32.130 --> 00:04:32.900
OK.

00:04:33.240 --> 00:04:35.640
Now we're going to move to the start reset button.

00:04:35.790 --> 00:04:36.420
OK.

00:04:36.660 --> 00:04:44.310
So we're going to be creating a diff following the choices Dave.

00:04:45.480 --> 00:04:51.130
And we're going to give it an ID starts resets

00:04:53.810 --> 00:04:57.330
unless I'm going to play some texta Stars game

00:05:01.490 --> 00:05:09.860
now let's dial this live if we look at our stars recess Musson will see that most of the properties

00:05:09.860 --> 00:05:15.050
of the button are very similar to the properties of the box class.

00:05:15.050 --> 00:05:25.010
OK so we're going to do we aren't going to copy the properties of the books class into the styling of

00:05:25.010 --> 00:05:26.310
the stars.

00:05:26.360 --> 00:05:29.350
Reset Button.

00:05:30.930 --> 00:05:35.120
And then we are going to adjust the styling for the button.

00:05:35.620 --> 00:05:38.390
OK.

00:05:39.500 --> 00:05:48.750
So let's take out a few properties we don't need like the line height gay or the height.

00:05:49.640 --> 00:05:54.990
If Lote's property OK we don't really need.

00:05:55.040 --> 00:05:55.770
Right.

00:05:55.880 --> 00:06:03.200
Well you don't need the margin property to center the button so you cannot go for a top and bottom margins

00:06:03.200 --> 00:06:06.820
of 0 and 0.04 left and right.

00:06:07.080 --> 00:06:07.380
OK.

00:06:07.380 --> 00:06:12.960
And now it sounds it also going to add some padding

00:06:15.770 --> 00:06:23.010
it's good for 10 pixels and the background color.

00:06:23.290 --> 00:06:24.370
We're going to change it.

00:06:24.470 --> 00:06:31.730
Basically this is a white transparence color and it looks like this because the color behind it is blue

00:06:31.750 --> 00:06:31.990
.

00:06:32.230 --> 00:06:32.990
OK.

00:06:33.170 --> 00:06:37.400
So again I use the IGDA function.

00:06:38.290 --> 00:06:38.800
OK.

00:06:38.840 --> 00:06:41.530
I'm going to use the values corresponding to white

00:06:45.110 --> 00:06:55.060
and then I'm going to go for point five for the transparency K for the with.

00:06:55.070 --> 00:07:01.040
Let's make it a little bit smaller.

00:07:01.040 --> 00:07:08.270
Even smaller than that and make sure that the text is still going to fit

00:07:11.500 --> 00:07:19.100
the and resets game.

00:07:19.810 --> 00:07:20.160
See

00:07:22.850 --> 00:07:29.890
C it's fine.

00:07:33.140 --> 00:07:34.090
OK.

00:07:34.310 --> 00:07:38.920
Now we are going to Tiley over an axiom states of the stars.

00:07:39.200 --> 00:07:48.000
OK so we need exactly the same properties of the Hoven actually states of the box class.

00:07:48.020 --> 00:07:54.610
So all we going to do is going to add another selector next to the box Hoven selector.

00:07:54.680 --> 00:07:55.370
OK.

00:07:55.540 --> 00:07:57.640
Are these Tarth resets wasn't

00:08:00.440 --> 00:08:02.780
going to be going on over.

00:08:03.550 --> 00:08:10.400
And similarly with the same thing with the active States.

00:08:13.310 --> 00:08:13.500
OK

00:08:13.760 --> 00:08:21.250
.

00:08:21.950 --> 00:08:22.220
All right.

00:08:22.220 --> 00:08:25.760
Now let's add our time remaining box.

00:08:25.760 --> 00:08:36.480
So this goes to our indexers H.M.S. file and creates a new div following our stars reset button and

00:08:36.950 --> 00:08:37.970
give it an ID

00:08:40.880 --> 00:08:42.650
time remaining.

00:08:43.430 --> 00:08:44.900
OK.

00:08:44.900 --> 00:08:48.410
So inside this div we're going to play some text.

00:08:48.500 --> 00:08:53.060
Ok so time remaining

00:08:55.830 --> 00:08:56.530
60

00:09:00.150 --> 00:09:01.160
seconds.

00:09:01.700 --> 00:09:07.040
So I'm going to place the number inside a span

00:09:09.980 --> 00:09:12.330
and give it an ID.

00:09:12.750 --> 00:09:14.890
Time remaining value.

00:09:14.900 --> 00:09:23.060
So we'll use the ID later on with javascript's to access this value and change it.

00:09:23.810 --> 00:09:26.370
OK.

00:09:26.680 --> 00:09:26.960
OK.

00:09:26.990 --> 00:09:34.420
Now let's go to the stunning sheet and style the time remaining box.

00:09:34.730 --> 00:09:39.840
So going to access is using its ID which is time remaining

00:09:43.400 --> 00:09:43.740
all right.

00:09:43.740 --> 00:09:48.710
So let's give it some weight and putting them in position is in our container.

00:09:48.720 --> 00:10:00.920
So it's so first of all give is a width of 200 pixels and a putting of about 10 pixels.

00:10:01.950 --> 00:10:03.520
OK.

00:10:03.620 --> 00:10:11.070
And let's position is inside our containers are going to give us a position as butes absolutes.

00:10:11.480 --> 00:10:12.490
Okay.

00:10:13.320 --> 00:10:21.710
And then are going to give it a top property of

00:10:24.570 --> 00:10:28.610
300 pixels.

00:10:29.830 --> 00:10:39.050
Fifty four hundred ok or a little bit less.

00:10:39.470 --> 00:10:41.920
Three hundred ninety five.

00:10:42.240 --> 00:10:43.060
OK.

00:10:43.230 --> 00:10:53.660
And a left position or left property of 300 or 400.

00:10:54.210 --> 00:11:01.590
OK let's change the width to 150 is make it slightly bigger.

00:11:01.890 --> 00:11:03.480
OK you explain.

00:11:03.480 --> 00:11:09.660
Now let's add some background color.

00:11:12.660 --> 00:11:13.850
OK.

00:11:14.120 --> 00:11:21.820
So if you want to get the same color as does this color is created using the ICBA function.

00:11:21.960 --> 00:11:25.130
OK so we're going to use a green color with some transparency.

00:11:25.410 --> 00:11:25.890
OK.

00:11:26.220 --> 00:11:32.150
So I'm going to use the IDBI function.

00:11:32.820 --> 00:11:42.090
So I'm going to use three values as following 1 8 1 2 3 5 and then 3 6 and then I'm going to add some

00:11:42.090 --> 00:11:49.340
transparency over pay zero 0.8 OK

00:11:53.460 --> 00:11:57.620
or a little bit less than that's your point seventy 78.

00:11:58.290 --> 00:12:01.580
OK.

00:12:03.940 --> 00:12:08.270
Continue the color if you want to you can use the control alt K

00:12:11.460 --> 00:12:17.730
method and this says the transparency using the slider.

00:12:17.820 --> 00:12:18.390
OK.

00:12:18.490 --> 00:12:21.790
You can choose any color you want.

00:12:22.620 --> 00:12:22.860
OK

00:12:22.890 --> 00:12:30.980
.

00:12:37.320 --> 00:12:42.890
Now let's tile the corners and just add some more the radius.

00:12:43.590 --> 00:12:44.010
OK

00:12:47.900 --> 00:12:54.810
it is go for 2 pixels 3.

00:12:55.640 --> 00:12:59.140
OK.

00:12:59.170 --> 00:13:03.780
So that's some valks shadow.

00:13:03.960 --> 00:13:11.690
So again I'm going to use Zerbe cells with the horizontal value and 4 pixels with a vertical one earning

00:13:11.940 --> 00:13:12.110
.

00:13:12.170 --> 00:13:14.590
We're going to use a gray color for the shadow.

00:13:14.660 --> 00:13:17.470
OK so we're going to use the Ojibway function again.

00:13:17.700 --> 00:13:20.750
So going to use the black color.

00:13:21.990 --> 00:13:23.560
OK.

00:13:23.580 --> 00:13:26.780
And then we're going to use a transparency of white to

00:13:30.170 --> 00:13:31.760
that looks.

00:13:32.420 --> 00:13:34.580
OK.

00:13:36.450 --> 00:13:42.140
Now we all need to hide the time remaining div initially.

00:13:42.140 --> 00:13:48.450
OK so we can use either the display property or the visibility property we have used the display property

00:13:48.650 --> 00:13:52.250
earlier with the correct and try again boxes.

00:13:52.290 --> 00:13:57.030
So let's use the visibility property this time to learn both.

00:13:57.060 --> 00:14:00.700
So when we use the visibility we are going to set it to hit it.

00:14:01.250 --> 00:14:01.520
OK

00:14:04.930 --> 00:14:10.300
something for you to remember the difference between the visibility hidden and the display on properties

00:14:10.860 --> 00:14:18.480
is that if we apply visibility hidden to a certain elements in our page that element is still going

00:14:18.480 --> 00:14:20.680
to be present in the page.

00:14:20.690 --> 00:14:21.170
OK.

00:14:21.240 --> 00:14:24.290
And he's going to interact with the other elements.

00:14:24.380 --> 00:14:30.840
So at the moment this one is not interaction with the other elements only because it's got a position

00:14:30.870 --> 00:14:36.550
property of absolutes creates all the other elements are behaving as if doesn't exist at all.

00:14:36.720 --> 00:14:45.110
OK the display on property is going to hide the elements and the elements is not going to end tracks

00:14:45.160 --> 00:14:46.880
any more with other elements.

00:14:46.880 --> 00:14:48.970
OK.

00:14:50.090 --> 00:14:59.310
All right now though we understood the difference let's just use the display property to make it easy

00:14:59.310 --> 00:15:02.040
to standardize all the functions in our code.

00:15:02.040 --> 00:15:05.310
Later on when we are writing javascript's.

00:15:05.770 --> 00:15:07.750
When I said display to none.

00:15:07.800 --> 00:15:11.720
And I'm just going to comment this one so they can amendments.

00:15:12.620 --> 00:15:12.870
OK