Pushing the boundaries of the original specification, CSS3 filters and blends can radically change the appearance of your HTML elements.

Filters

See the Pen Splash by Dirk Weber (@DirkWeber) on CodePen.

Example of a SVG filter created by Dirk Weber

CSS Filters has its origin in a SVG (Scalable Vector Graphics) feature for applying image processing effects to vector graphics. Robert O’Callahan figured out how to apply the filters effects to HTML content via CSS.

How Filters Work

Before the rendered page loads, the filter takes a snapshot of the page as a bitmap. The effects are then applied to the HTML elements, which are rendered and composited into a finished page. There are many filters.

It is possible to animate the effects as well, as you can see in the following demo. Filter values are mostly between 0 and 100%, or 0 to 1.0, some go higher.

• blur(0px) A unit number to determines the amount of gaussian blur.
• brightness(0-1-10) 0 darkens the picture to black, 1 is normal and up to 10 increased the brightness.
• contrast(0-1-10) where 0 is solid grey, 1 is normal and up to 10 increased the contrast.
• drop-shadow(15px 15px 20px silver)
• grayscale(0-1) Reduce chroma gradually to none at all.
• hue-rotate(0- 360deg) Rotate the hue through all the colors.
• invert(0-1) Inverts the colors, .5 is solid grey.
• opacity(0-1) Where 0 is transparent and 1 is opaque, and everything in between is translucent.
• saturate(0-1-10) Saturates the colors, where 0 is greyscale, 1 is normal saturation and up to 10 increases the saturation
• sepia(0-1) Increase in sepia toning of the print;

Lively Grid/compositing demo

Blending Modes

The CSS composting and blending modes feature lets us blend an element’s background layer with another background layer, to blend between background images, gradients, and background colors, or to blend one element with another element.

How Blend Modes Work

Just like in Photoshop, two layers are usually added, with the top layer replacing the bottom layer. The blend modes lets you specify other mathematical relations between the two layers. For example, the multiply mode multiplies the two layers together, with the result that is darker than either layer.

The power of background blend modes can be seen in this compositing blends demo

Background Blending

Background blending blends the layers within a background. This is useful for blending a picture with a background color.

The following blending modes are implemented in webkit and follow those found in Photoshop:

A more complicated example blends multiple layers. Change the blending mode of each background with varying results.

Blending Elements

Blending between background layers is all very fine but blending between HTML elements is accumulative, that is, the blend blends the blending associated with each element in the element stack.

There are four elements in the following demo, once container and three children. The blend of each child plays a roll in the final outcome. You can play with the stacking order z-index or change the blending modes to see how these elements interact

Complex Blend Effects

Complex Blend Effects

Masks

Masks allow you to use an image or a polygon clip path to reveal only part of an element. Just like in Photoshop, the white areas display and the black areas do not.
peace

• Demonstration

Take the HTML5 template from the class website.
1. remove the <nav> and <ul> so only the <header> and <h1> are left.
2. Enter “CSS3 Exercise” in h1
3. Remove the <p> and <figure> <img> and <figcaption> from the <article> tag.
4. remove the <footer> tag.
5. We will manipulate the HTML using only CSS styling. Remove the .example {} in the embedded style sheet.
6. Give the section —the holding container — 100px margins on top and left to push the content away from the ends, and position it relative, in case you want to use absolute position at a later date.
7. Give the header a 60 pixel margin at the bottom.
8. The article will be given the style that will change as we move the window. The default style is a 200px square with a background color and a 1px border, positioned absolutely.
9. Include a div element inside of the article element. Make sure you close the div. This div will be targeted by the transition from one picture to the other.
10. We want to annotate what we are doing and will use the pseudo element header:after to tack on the word plain and set it below the header using relative positioning.
11. header:after {content:”plain”; position: relative; top: 0px; color: hsla(0,100%,50%,.7); font-size: 1.2em;}
12. Now comes the fun part. We are going to make this responsive, so that as we pull it past 400px, the style of the <article> element and the description in the title will change.
13. First we make the @media block set to trigger at a window with greater than 400px: @media all and (min-width: 401px) {
    }
14. Inside the @media block, we change the article using border radius to 50%. That turns a square into a circle.
15. article {border: 20px solid #666; border-radius: 50%;}
16. We want to change the description from plain to “border radius” header:after {content:”border radius”;}
17. and finally, place a number 1 in front of “CSS Exercise” header to keep track of the number that we complete.
18. h1:before {content:”1. “;}
19. Go back to your document and move the page width beyond the 400px threshold, and you should see the square change.
20. You are now where you were in last week’s exercise, with the additional div element placed inside of the article element. This week we apply transitions, transformations and animation.
21. You can get the different properties for the demonstrations on the website.
22. The procedure remains the same, with an incremental 100px jump with each new media query.
23. Notice that there is no need to repeat properties if they are already defined. There is only a need to overwrite properties that will change.
24. The next media query looks like @media (min-width: 500px) {
    }
25. article {background: purple; -webkit-transition: all 2s ease-in-out;background-size: cover;}
26. article:hover { background: blue;}
27. header:after {content:”transition background color”;}
28. h1:before {content:”2. “;}
29. @media all and (min-width: 600px) {
    }
30. article {background: url(http://a.parsons.edu/~dejongo/12-fall/stuff/08_transition-2.jpg); opacity: 1;
    -webkit-transition: all 2s ease-in-out;background-size: cover; border: none; border-radius: 0;}
31. article:hover {background: url(http://a.parsons.edu/~dejongo/12-fall/stuff/08_transition-2.jpg); opacity: 0; background-size: cover;}
32. div {width: 400px; height: 400px; background: url(http://a.parsons.edu/~dejongo/12-fall/stuff/08_transition-1.jpg) center center; border: 1px solid silver; position: absolute; left; 0; opacity: 1.0; background-size: cover; }
33. header:after {content:”transition between pictures”;}
34. h1:before {content:”3. “;}
35. @media all and (min-width: 700px) {
    }
36. article, div {-webkit-transform-origin: top left;
    -moz-transform-origin: top left;
    -webkit-transform: scale(1) rotate(45deg)
    translate(100px, 0px) skew(0deg, 0deg);
    -moz-transform: scale(1) rotate(45deg)
    translate(100px, 0px) skew(0deg, 0deg);}
37. header:after {content:”2D (z-axis) rotate”;}
38. h1:before {content:”4. “;}
39. @media all and (min-width: 800px) {
    }
40. article, div {
    -webkit-transform-origin: top left;
    -moz-transform-origin: top left;
    -webkit-transform: perspective(305)
    translate3d(100px, 0px, 30px)
    scale3d(.5, .5, .7)
    rotate3d(51, 49, 60, 49deg);
    -webkit-transform-origin: 9% 51% 50%;
    -webkit-transform-style: preserve-3d;
    -moz-transform: perspective(305)
    translate3d(100px, 0px, 30px)
    scale3d(.3, .3, .5)
    rotate3d(51, 49, 60, 49deg);
    -moz-transform-origin: 9% 51% 50%;
    -moz-transform-style: preserve-3d;}
41. header:after {content:”3D Transform”;}
42. h1:before {content:”5. “;}

    @media all and (min-width: 900px) {
    }

43. article, div {
    -webkit-transform: none;
    -moz-transform: none;}
44. header:after {content:”back to normal coordinates”;}
45. h1:before {content:”6. “;}
46. @media all and (min-width: 1000px) {
    }

47. @-webkit-keyframes name-for-animation {
    0% { top: 30px; left: 100%; }
    10% { top: 100px; left: 90%; }
    20% { top: −200px; left: 80%; }
    30% { top: 100px; left: 70%;
    width: 200px; height: 200px;
    border-width: 100px;
    }
    40% { top: −200px; left: 60%;
    width: 200px; height: 200px;
    border-radius: 100%;
    border-width: 0px;
    }
    50% { top: 50px; left: 50%;
    width: 400px; height: 400px;
    border-radius: 0%;
    border-width: 100px;
    }
    60% { top: −200px; left: 40%; }
    70% { top: 200px; left: 30%; }
    80% { top: -200px; left: 20%; }
    90% { top: 500px; left: 10%; }
    100% { top: 30px; left: -10%; }
    }
    @-moz-keyframes name-for-animation {
    0% { top: 30px; left: 100%; }
    10% { top: 100px; left: 90%; }
    20% { top: −200px; left: 80%; }
    30% { top: 100px; left: 70%;
    width: 200px; height: 200px;
    border-width: 100px;
    }
    40% { top: −200px; left: 60%;
    width: 200px; height: 200px;
    border-radius: 100%;
    border-width: 0px;
    }
    50% { top: 50px; left: 50%;
    width: 400px; height: 400px;
    border-radius: 0%;
    border-width: 100px;
    }
    60% { top: −200px; left: 40%; }
    70% { top: 200px; left: 30%; }
    80% { top: -200px; left: 20%; }
    90% { top: 500px; left: 10%; }
    100% { top: 30px; left: -10%; }
    }
48. article, div {
    -webkit-animation: name-for-animation 10s linear infinite;
    -moz-animation: name-for-animation 10s linear infinite;
    position: absolute;
    top: 30px;
    left: 100%;
    z-index: 50;
    width: 400px;
    height: 20px;
    border: 4px solid yellow;
    text-overflow: hidden;
    text-align: center;}
49. header:after {content:”animation (hover over picture to transition to other picture)”;}
50. h1:before {content:”6. “;}
51. You can explore this further in class or at home.