From the course: CSS Shorts

Unlock this course with a free trial

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

Create a vignette

Create a vignette - CSS Tutorial

From the course: CSS Shorts

Start my 1-month free trial Buy for my team

Create a vignette

“

- [Chris] Hi, this is Chris Converse, and in this episode we'll create a vignette effect for a photo by combining a background image with the box shadow properties. So if you'd like to follow along, download the exercise files and I'll begin by opening the HTML file in the text editor. And so once you have the HTML file open, up in the head area you'll see we have a link to style.css, which we'll be opening in a moment. Inside of the body area we have an article element, and inside of the article element is an h1, a div with a class of photo, and a paragraph element. So what we're going to be doing is taking this div with a class of photo, using a pseudo-element to give it some dimension, and applying a background image and then combining those with the css inset properties to create the vignette. So the first thing we'll do is add the background image in the HTML here. So after class equals photo, let's add a style attribute. We're going to set this equal to background image, colon…

Contents