From the course: CSS Shorts

Unlock this course with a free trial

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

Shadow for a PNG file

Shadow for a PNG file - CSS Tutorial

From the course: CSS Shorts

Shadow for a PNG file

- [Instructor] Hi, this is Chris Converse and in this episode, we'll use CSS filters to create a drop shadow for a transparent png file so that the shadow matches the pixels in the image and not the bounding box of the whole graphic, and the only browser this doesn't work in is IE 11. So, if you'd like to follow along, download the exercise files and let's begin by opening the HTML file and the Text Editor. So, here I have the HTML file open in the Text Editor and over on the right, I also have this opened in a browser. So, what we're going to do is we want to add a shadow onto this gear and onto this track, and these are png files that are being brought into the HTML file. So, we can see those showing up here, but as I mentioned before, if we simply added a box shadow, we would get a shadow that would be around the bounding box of these graphics. So, what we're going to do is first come in here and duplicate these graphics, and then, we're going to modify those duplicates in CSS. So,…

Contents