1
00:00:02.02 --> 00:00:03.06
- [Instructor] Hi, this is Chris Converse

2
00:00:03.06 --> 00:00:05.09
and in this episode,
we'll use CSS to display

3
00:00:05.09 --> 00:00:08.00
a full color image as grayscale,

4
00:00:08.00 --> 00:00:10.00
and when we combine this
with opacity settings,

5
00:00:10.00 --> 00:00:11.08
we can create a duotone effect,

6
00:00:11.08 --> 00:00:14.00
all with just a few CSS properties.

7
00:00:14.00 --> 00:00:15.06
So if you'd like to follow along,

8
00:00:15.06 --> 00:00:17.06
download the exercise
files and let's begin

9
00:00:17.06 --> 00:00:21.04
by opening the HTML file in a text editor.

10
00:00:21.04 --> 00:00:23.05
And now in the HTML file,
up in the head area,

11
00:00:23.05 --> 00:00:25.08
we have a link to style.css

12
00:00:25.08 --> 00:00:28.00
which we're going to
be opening in a minute.

13
00:00:28.00 --> 00:00:32.08
Inside of the main body
area, we have a main element,

14
00:00:32.08 --> 00:00:35.04
and inside of there is an article element.

15
00:00:35.04 --> 00:00:37.06
Over in the browser,
we can see this element

16
00:00:37.06 --> 00:00:38.09
over here on the left.

17
00:00:38.09 --> 00:00:41.00
This is actually a pseudo-element
that's being treated

18
00:00:41.00 --> 00:00:42.05
like a flex property.

19
00:00:42.05 --> 00:00:43.05
And we actually covered this technique

20
00:00:43.05 --> 00:00:45.06
in an earlier episode.

21
00:00:45.06 --> 00:00:47.07
So what we're going to be
doing is adding an image

22
00:00:47.07 --> 00:00:51.06
into here using CSS and displaying
that image as grayscale.

23
00:00:51.06 --> 00:00:54.03
So let's go back to our exercise files.

24
00:00:54.03 --> 00:00:56.03
Let's find style.css.

25
00:00:56.03 --> 00:00:58.07
Let's open this in our text editor.

26
00:00:58.07 --> 00:01:02.09
Let's scroll down.

27
00:01:02.09 --> 00:01:05.03
In the CSS, we can see
our main element here

28
00:01:05.03 --> 00:01:07.05
which has a display type set to flex

29
00:01:07.05 --> 00:01:09.06
which gives us our columns.

30
00:01:09.06 --> 00:01:10.08
So what we're going to do
is let's come down here

31
00:01:10.08 --> 00:01:16.04
to the main element with the
pseudo-element of before.

32
00:01:16.04 --> 00:01:18.09
Down here we can see the background color,

33
00:01:18.09 --> 00:01:20.06
and let's come in here and
add some additional values

34
00:01:20.06 --> 00:01:22.05
to this background property.

35
00:01:22.05 --> 00:01:25.06
So after the color, let's hit a space.

36
00:01:25.06 --> 00:01:31.00
Let's type in url, put in our parentheses.

37
00:01:31.00 --> 00:01:34.07
Then we'll put images, forward slash,

38
00:01:34.07 --> 00:01:37.04
background.jpg.

39
00:01:37.04 --> 00:01:39.04
Outside of the parentheses,
we're going to set the repeat

40
00:01:39.04 --> 00:01:43.04
to no-repeat, and then
for the position x and y,

41
00:01:43.04 --> 00:01:48.04
we'll set both of these to zero.

42
00:01:48.04 --> 00:01:51.02
Next property, let's set background-size,

43
00:01:51.02 --> 00:01:53.05
and let's set this to cover.

44
00:01:53.05 --> 00:01:55.03
With this in place, let's hit save.

45
00:01:55.03 --> 00:01:57.03
We'll now see the full-color image

46
00:01:57.03 --> 00:02:01.05
showing up on the left-hand
side here in the preview.

47
00:02:01.05 --> 00:02:02.04
So now let's come back here

48
00:02:02.04 --> 00:02:06.03
and let's change this to grayscale.

49
00:02:06.03 --> 00:02:09.04
So we'll add a filter property,

50
00:02:09.04 --> 00:02:15.01
then a space, then we'll
type in the word grayscale,

51
00:02:15.01 --> 00:02:18.07
beginning and ending
parentheses and a semicolon.

52
00:02:18.07 --> 00:02:23.04
Inside of the parentheses,
we're going to set this to 100%.

53
00:02:23.04 --> 00:02:24.06
Hit save.

54
00:02:24.06 --> 00:02:26.02
We'll now see that the
image is now being displayed

55
00:02:26.02 --> 00:02:29.01
as a 100% grayscale.

56
00:02:29.01 --> 00:02:31.00
And now to give us that duotone effect,

57
00:02:31.00 --> 00:02:33.08
let's come in here and
set an opacity property,

58
00:02:33.08 --> 00:02:38.02
and we're going to set this
to .3, then a semicolon.

59
00:02:38.02 --> 00:02:40.07
Save your CSS again,
go back to the browser.

60
00:02:40.07 --> 00:02:42.07
And now with that
grayscale image being shown

61
00:02:42.07 --> 00:02:46.05
at 30% transparency, over
that darker background color,

62
00:02:46.05 --> 00:02:49.01
which we set here, we're
getting a nice duotone effect

63
00:02:49.01 --> 00:02:51.05
for that full color image.

64
00:02:51.05 --> 00:02:53.07
And so with that, I'll
conclude this episode,

65
00:02:53.07 --> 00:02:56.06
and as always, thanks for watching.