Day #7 Image Manipulation

Sandbox This is where you play

Instructions: Use CSS3 filters to manipulate the below images. Refer to the "Final Result" below for help.

Example #1 grayscale

Example #2 Blur

Example #3 invert

Example #4 sepia

Final Result Use this for reference!

Example #5 brightness

Example #6 saturate

Example #7 contrast

Example #8 drop-shadow

Information About this lesson

What are we making?

Fun & fancy ways to manipulate images purely with CSS!

Where can I use it?

In your websites, client projects and applications as a way to do interesting things with images. It's a great way to avoid Photoshop for simple tweaks!

How compatible are these styles with major browsers?

Check the CSS3 styles from your stylesheet on this website. It allows you to see the compatibility of every CSS style with major browser.