From the course: CSS Shorts

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Display images as grayscale

Display images as grayscale - CSS Tutorial

From the course: CSS Shorts

Start my 1-month free trial Buy for my team

Display images as grayscale

“

- [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…

Contents