Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
1
00:00:01,809 --> 00:00:05,559
Let's talk about colors in CSS.
2
2
00:00:06,481 --> 00:00:09,916
In CSS, colors are displayed combining red,
3
3
00:00:09,916 --> 00:00:12,412
green, and blue light.
4
4
00:00:12,412 --> 00:00:14,245
This is the RGB model.
5
5
00:00:15,111 --> 00:00:17,903
In the RGB model, each color is defined
6
6
00:00:17,903 --> 00:00:19,641
by a combination of red,
7
7
00:00:19,641 --> 00:00:23,391
green, and blue using a hexadecimal notation.
8
8
00:00:25,207 --> 00:00:27,949
The lowest value for each color is zero,
9
9
00:00:27,949 --> 00:00:30,855
which is zero in hexadecimal,
10
10
00:00:30,855 --> 00:00:33,722
and the highest value is 255,
11
11
00:00:33,722 --> 00:00:35,972
which is ff in hexadecimal.
12
12
00:00:37,404 --> 00:00:39,412
So, for instance,
13
13
00:00:39,412 --> 00:00:41,664
the complete red has ff,
14
14
00:00:41,664 --> 00:00:45,102
which is the highest value in the red channel,
15
15
00:00:45,102 --> 00:00:48,540
and zero in the green and the blue channel.
16
16
00:00:48,540 --> 00:00:51,980
Yellow is a mixture of red and green,
17
17
00:00:51,980 --> 00:00:55,739
so it has ff in the red and in the green channel,
18
18
00:00:55,739 --> 00:00:57,990
but zero in the blue channel.
19
19
00:00:57,990 --> 00:01:00,072
You get the idea, right?
20
20
00:01:00,072 --> 00:01:01,750
You can just pause the video
21
21
00:01:01,750 --> 00:01:03,550
and look at the RGB model
22
22
00:01:03,550 --> 00:01:06,883
if you want to analyze all colors there.
23
23
00:01:08,128 --> 00:01:11,039
So by mixing red, green, and blue together
24
24
00:01:11,039 --> 00:01:14,723
using different values between zero and 255,
25
25
00:01:14,723 --> 00:01:17,806
we can obtain over 16 million colors.
26
26
00:01:19,683 --> 00:01:23,195
For instance, this nice green is represented
27
27
00:01:23,195 --> 00:01:26,028
with this hexadecimal code 1da717.
28
28
00:01:28,921 --> 00:01:31,869
So we have 1d for red, a7 for green,
29
29
00:01:31,869 --> 00:01:33,202
and 17 for blue.
30
30
00:01:34,119 --> 00:01:37,761
Mixing these together makes this nice green.
31
31
00:01:37,761 --> 00:01:39,988
But don't worry so much about these numbers
32
32
00:01:39,988 --> 00:01:42,190
because picking our colors in Brackets
33
33
00:01:42,190 --> 00:01:43,690
will be very easy.
34
34
00:01:45,423 --> 00:01:47,798
And for gray colors, just make red,
35
35
00:01:47,798 --> 00:01:50,744
green, and blue take the same value.
36
36
00:01:50,744 --> 00:01:52,411
For instance, 8b8b8b
37
37
00:01:54,389 --> 00:01:57,705
gives us that first shade of gray we see here.
38
38
00:01:57,705 --> 00:02:01,025
If all six values in a hex code are the same,
39
39
00:02:01,025 --> 00:02:02,025
like 555555,
40
40
00:02:04,382 --> 00:02:06,049
we simply write 555.
41
41
00:02:08,558 --> 00:02:10,642
Now one last thing,
42
42
00:02:10,642 --> 00:02:14,575
CSS colors can also have transparencies.
43
43
00:02:14,575 --> 00:02:17,071
If we want colors for transparencies,
44
44
00:02:17,071 --> 00:02:19,856
we do not use the hexadecimal notation.
45
45
00:02:19,856 --> 00:02:22,391
Instead, we write them like you can see
46
46
00:02:22,391 --> 00:02:24,313
on the green square.
47
47
00:02:24,313 --> 00:02:26,935
This gives us the same green we saw before,
48
48
00:02:26,935 --> 00:02:29,518
but with 75% transparency.
49
49
00:02:31,565 --> 00:02:32,640
So, I will now show you
50
50
00:02:32,640 --> 00:02:35,473
how all of this works in Brackets.
51
51
00:02:36,834 --> 00:02:39,370
Back to the CSS file of our project,
52
52
00:02:39,370 --> 00:02:40,254
let's try to change
53
53
00:02:40,254 --> 00:02:41,971
that green color of the headings
54
54
00:02:41,971 --> 00:02:43,651
we defined before,
55
55
00:02:43,651 --> 00:02:45,205
because we will actually never use
56
56
00:02:45,205 --> 00:02:46,924
color names like green,
57
57
00:02:46,924 --> 00:02:49,424
as we did in the last lecture.
58
58
00:02:50,817 --> 00:02:53,683
So put the cursor here on this color,
59
59
00:02:53,683 --> 00:02:55,812
and then hit Command + E,
60
60
00:02:55,812 --> 00:02:59,175
just as we did before in the HTML file.
61
61
00:02:59,175 --> 00:03:00,157
But this time
62
62
00:03:00,157 --> 00:03:03,349
it's not a CSS editor which comes up,
63
63
00:03:03,349 --> 00:03:05,599
but this nice color picker.
64
64
00:03:07,524 --> 00:03:10,716
So this is a pretty powerful color picker.
65
65
00:03:10,716 --> 00:03:13,951
You can click everywhere around here
66
66
00:03:13,951 --> 00:03:15,618
to choose the color.
67
67
00:03:17,073 --> 00:03:18,714
And you actually can see
68
68
00:03:18,714 --> 00:03:21,631
the color changing in our web page.
69
69
00:03:24,484 --> 00:03:26,817
We can also use these sliders here
70
70
00:03:26,817 --> 00:03:30,234
to change the color hue and transparency.
71
71
00:03:32,054 --> 00:03:34,102
So here I can change the color,
72
72
00:03:34,102 --> 00:03:36,716
if you wanted a yellow color,
73
73
00:03:36,716 --> 00:03:39,211
blue color, I don't know.
74
74
00:03:39,211 --> 00:03:42,294
So we can choose anything right here.
75
75
00:03:43,388 --> 00:03:44,823
And with this slider,
76
76
00:03:44,823 --> 00:03:47,544
we can adjust the transparency.
77
77
00:03:47,544 --> 00:03:49,754
As we saw before,
78
78
00:03:49,754 --> 00:03:52,421
this now has this RGBA notation,
79
79
00:03:53,605 --> 00:03:56,874
and here we have the transparency value.
80
80
00:03:56,874 --> 00:04:00,624
Now I will just put this back up to 100%
81
81
00:04:02,157 --> 00:04:05,104
and change to the hexadecimal notation
82
82
00:04:05,104 --> 00:04:07,187
that I showed you before.
83
83
00:04:09,727 --> 00:04:10,996
So you can play around
84
84
00:04:10,996 --> 00:04:13,453
with these colors as you wish,
85
85
00:04:13,453 --> 00:04:16,084
I will just choose some
86
86
00:04:16,084 --> 00:04:18,417
nice green for our headings.
87
87
00:04:20,024 --> 00:04:22,030
Maybe this one.
88
88
00:04:22,030 --> 00:04:24,030
So now I will close this
89
89
00:04:24,896 --> 00:04:28,371
and now we have a beautiful green color
90
90
00:04:28,371 --> 00:04:30,383
for all our headings.
91
91
00:04:30,383 --> 00:04:31,569
Another thing,
92
92
00:04:31,569 --> 00:04:34,069
I will go to the picker again.
93
93
00:04:35,131 --> 00:04:39,305
Now if we push this all the way to this side,
94
94
00:04:39,305 --> 00:04:42,252
we have actually all the shades of gray,
95
95
00:04:42,252 --> 00:04:45,036
from complete white, which is fff,
96
96
00:04:45,036 --> 00:04:48,369
all the way down to black, which is 000.
97
97
00:04:49,538 --> 00:04:51,871
So if we move up and down here,
98
98
00:04:51,871 --> 00:04:54,121
we can choose a gray color.
99
99
00:04:56,575 --> 00:05:00,380
But as I said, what I want is a green color.
100
100
00:05:00,380 --> 00:05:02,715
So just put it here.
101
101
00:05:02,715 --> 00:05:04,799
And here Bracket even shows us
102
102
00:05:04,799 --> 00:05:07,297
the colors we use the most in our design.
103
103
00:05:07,297 --> 00:05:09,097
This can be pretty useful
104
104
00:05:09,097 --> 00:05:11,347
if you use multiple colors.
105
105
00:05:12,900 --> 00:05:13,733
All right,
106
106
00:05:13,733 --> 00:05:16,137
so let me close this color picker,
107
107
00:05:16,137 --> 00:05:19,499
and I think that's it for now with colors.
108
108
00:05:19,499 --> 00:05:23,761
So now you know how to work with colors in CSS.
109
109
00:05:23,761 --> 00:05:26,094
See you in the next lecture.
8562
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.