This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Manipulate Images Using CSS Filter and Blend Modes

    Damon BauerDamon Bauer

    Apply filters like blur, brightness, saturation and hue to images. Combined with CSS blend modes, you can create powerful image effects using only code. This can drastically reduce the amount of time spent back and forth between designers and developers.

    Here's more information about filter, blend-mode, and mix-blend-mode.

    cssCSS
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    00:00 Let's start out by adding image selector. Inside of it, we'll type "filter." I'll add a sepia function. I'll provide it a value of, let's say, 80 percent. Filter functions are very powerful when you chain them together.

    00:16 Let's comment the sepia filter out and we'll set up another filter declaration. This time, I'll start with a contrast function and I'll give it a value of 175 percent. I'll add a space. Now, I'll include a saturate function. I'll give it a value of let's say 300 percent. Finally I'll add another space. I'll add a hue-rotate function. I'm going to give it 300 degrees.

    00:47 Next, let's look at background images. I'll comment this image out and I'll create a new div with the class of bear. We'll set up a selector to target the bear class. I'll set up a background image. I'll just use this source that I had before.

    01:03 I'll also add background color of, let's say, indigo. Need to add a few properties to get this div to show up. We can use the background blend mode property. I'm going to give it a value of exclusion.

    01:26 Blend modes can even be used with other elements such as text. Inside of the bear class, I'll add a paragraph tag with some text. I'll change the bear class to center that text. Now, I'll add a selector for the text inside of the bear class. I'm just going to add a few text properties to make that text a little bigger. I'll add a color to this text. I'm going to say color of coral.

    02:00 Now, I'll add another property called "mix blend mode." I'll give it a value of difference. Can also change this to something like "color dodge." Depending on what colors and what blend modes you choose, you can get some really, really cool combinations going.

    Discuss

    Discuss