Note: There will be free exercise files for most episodes, which will allow you to follow along with author Chris Converse, as you explore all the possibilities CSS has to offer.
Skill Level Intermediate
- [Instructor] Hi, this is Chris Converse and in this episode, we'll use CSS to display a full color image as grayscale, and when we combine this with opacity settings, we can create a duotone effect, all with just a few CSS properties. So if you'd like to follow along, download the exercise files and let's begin by opening the HTML file in a text editor. And now in the HTML file, up in the head area, we have a link to style.css which we're going to be opening in a minute. Inside of the main body area, we have a main element, and inside of there is an article element.
Over in the browser, we can see this element over here on the left. This is actually a pseudo-element that's being treated like a flex property. And we actually covered this technique in an earlier episode. So what we're going to be doing is adding an image into here using CSS and displaying that image as grayscale. So let's go back to our exercise files. Let's find style.css. Let's open this in our text editor. Let's scroll down. In the CSS, we can see our main element here which has a display type set to flex which gives us our columns.
So what we're going to do is let's come down here to the main element with the pseudo-element of before. Down here we can see the background color, and let's come in here and add some additional values to this background property. So after the color, let's hit a space. Let's type in url, put in our parentheses. Then we'll put images, forward slash, background.jpg. Outside of the parentheses, we're going to set the repeat to no-repeat, and then for the position x and y, we'll set both of these to zero.
Next property, let's set background-size, and let's set this to cover. With this in place, let's hit save. We'll now see the full-color image showing up on the left-hand side here in the preview. So now let's come back here and let's change this to grayscale. So we'll add a filter property, then a space, then we'll type in the word grayscale, beginning and ending parentheses and a semicolon.
Inside of the parentheses, we're going to set this to 100%. Hit save. We'll now see that the image is now being displayed as a 100% grayscale. And now to give us that duotone effect, let's come in here and set an opacity property, and we're going to set this to .3, then a semicolon. Save your CSS again, go back to the browser. And now with that grayscale image being shown at 30% transparency, over that darker background color, which we set here, we're getting a nice duotone effect for that full color image.
And so with that, I'll conclude this episode, and as always, thanks for watching.
Q: Why can't I earn a Certificate of Completion for this course?
A: We publish a new tutorial or tutorials for this course on a regular basis. We are unable to offer a Certificate of Completion because it is an ever-evolving course that is not designed to be completed. Check back often for new movies.