{"id":2844,"date":"2015-03-29T08:24:17","date_gmt":"2015-03-29T08:24:17","guid":{"rendered":"http:\/\/a.parsons.edu\/~dejongo\/?p=2844"},"modified":"2019-09-06T12:58:04","modified_gmt":"2019-09-06T12:58:04","slug":"10-compositing-and-blending","status":"publish","type":"post","link":"https:\/\/b.parsons.edu\/~dejongo\/10-compositing-and-blending\/","title":{"rendered":"10 Compositing and Blending"},"content":{"rendered":"<p>Pushing the boundaries of the original specification, CSS3 filters and blends can radically change the appearance of your <a href=\"https:\/\/bennettfeely.com\/image-effects\/\"> HTML elements<\/a>. <\/p>\n<h2>Filters<\/h2>\n<\/p>\n<p data-height=\"265\" data-theme-id=\"0\" data-slug-hash=\"qdaWEx\" data-default-tab=\"html,result\" data-user=\"DirkWeber\" data-embed-version=\"2\" data-pen-title=\"Splash\" class=\"codepen\">See the Pen <a href=\"https:\/\/codepen.io\/DirkWeber\/pen\/qdaWEx\/\">Splash<\/a> by Dirk Weber (<a href=\"https:\/\/codepen.io\/DirkWeber\">@DirkWeber<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/production-assets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>Example of a SVG filter created by <a href=\"http:\/\/w3.eleqtriq.com\" target=\"_target\"  rel=\"noopener noreferrer\">Dirk Weber<\/a>\n<\/p>\n<p>CSS Filters has its origin in a SVG (Scalable Vector Graphics) feature for applying image processing effects to vector graphics. <a href=\"http:\/\/robert.ocallahan.org\/2008\/06\/applying-svg-effects-to-html-content_04.html\">Robert O\u2019Callahan<\/a> figured out how to apply the filters effects to HTML content via CSS. <\/p>\n<h2>How Filters Work<\/h2>\n<\/p>\n<p>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 <a href=\"http:\/\/dev.w3.org\/fxtf\/filters\/#typedef-filter-function-list\"> many filters<\/a>.\n<\/p>\n<p>It is possible to animate the effects as well, as you can see in the following <a href=\"http:\/\/html5-demos.appspot.com\/static\/css\/filters\/index.html\">demo<\/a>. Filter values are mostly between 0 and 100%, or 0 to 1.0, some go higher.<\/p>\n<ul>\n<li>blur(0px) A unit number to determines the amount of gaussian blur.\n<\/li>\n<li>brightness(0-1-10) 0 darkens the picture to black, 1 is normal and up to 10 increased the brightness.\n<\/li>\n<li>contrast(0-1-10) where 0 is solid grey, 1 is normal and up to 10 increased the contrast.\n<\/li>\n<li>drop-shadow(15px 15px 20px silver)\n<\/li>\n<li>grayscale(0-1) Reduce chroma gradually to none at all.\n<\/li>\n<li>hue-rotate(0- 360deg) Rotate the hue through all the colors.\n<\/li>\n<li>invert(0-1) Inverts the colors, .5 is  solid grey.\n<\/li>\n<li>opacity(0-1) Where 0 is transparent and 1 is opaque, and everything in between is translucent.\n<\/li>\n<li>saturate(0-1-10) Saturates the colors, where 0 is greyscale, 1 is normal saturation and up to 10 increases the saturation\n<\/li>\n<li>sepia(0-1) Increase in sepia toning of the print;\n<\/li>\n<\/ul>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#f-example {\r\n-webkit-transition-property: filter;\r\n-webkit-transition-duration: 1s;\r\nborder: 20px dashed red;\r\nmargin: 10px 10px 40px; \r\npadding: 10px;\r\ncolor: #000; background: orange;\r\n}\r\n<\/style><\/pre>\n<\/div>\n<div id=\"f-example\">\n<h2>Taiyo in the Snow<\/h2>\n<p><strong>Anyone familiar with Tompkins Square Park will know that this great tree has been cut down. It was deemed a safety hazard. <\/strong><\/p>\n<p><img decoding=\"async\" src=\"http:\/\/b.parsons.edu\/~dejongo\/12-fall\/stuff\/08_transition-2.jpg\" alt=\"Taiyo in the snow\" \/>\n<\/p>\n<\/div>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#f-example:hover {\r\n-webkit-filter: blur(4px) brightness(1)  contrast(3.2) drop-shadow(0px 0px 20px black) grayscale(0.2) hue-rotate(90deg) invert(.1) opacity(0.8) saturate(2.1) sepia(0.1);}\r\n<\/style><\/pre>\n<\/div>\n<p><a href=\"https:\/\/codepen.io\/una\/pen\/BWPbzV\" target=\"_blank\"  rel=\"noopener noreferrer\">Lively Grid\/compositing demo<\/a><\/p>\n<h2>Blending Modes<\/h2>\n<\/p>\n<p>The <a href=\"http:\/\/dev.w3.org\/fxtf\/compositing-1\/\">CSS composting and blending<\/a> modes feature lets us blend an element\u2019s background layer with another background layer, to blend between background images, gradients, and background colors, or to blend one element with another element.<\/p>\n<h2>How Blend Modes Work<\/h2>\n<\/p>\n<p>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.\n<\/p>\n<p>The power of background blend modes can be seen in this <a href=\"http:\/\/bennettfeely.com\/gradients\/\">compositing blends demo<\/a><\/p>\n<h2>Background Blending<\/h2>\n<\/p>\n<p>Background blending blends the layers within a background. This is useful for blending a picture with a background color.\n<\/p>\n<p>The following blending modes are implemented in webkit and follow those found in Photoshop:<\/p>\n<style>\n.group li {display: inline-block;}\n<\/style>\n<div class=group>\n<ul>\n<li> normal\n<\/li>\n<li> multiply\n<\/li>\n<li> screen\n<\/li>\n<li> overlay\n<\/li>\n<li> darken\n<\/li>\n<li> lighten\n<\/li>\n<li> color-dodge\n<\/li>\n<li>color-burn\n<\/li>\n<li> hard-light\n<\/li>\n<li> soft-light\n<\/li>\n<li> difference\n<\/li>\n<li> exclusion\n<\/li>\n<\/ul>\n<p>The following blending modes are not yet implemented by webkit<\/p>\n<ul>\n<li> hue <\/li>\n<li> saturation <\/li>\n<li> color <\/li>\n<li> luminosity <\/li>\n<\/ul>\n<\/div>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#bb-example {\r\nwidth: 500px;\r\nheight: 333px;\r\nmargin: 20px auto;\r\nbackground: url(http:\/\/b.parsons.edu\/~dejongo\/12-fall\/stuff\/08_transition-2.jpg) , red;\r\n\/* change the color value*\/\r\nbackground-blend-mode: exclusion;\r\n\/* blend-mode = normal | multiply | screen | overlay | darken | lighten | color-dodge |color-burn | hard-light | soft-light | difference | exclusion  *\/<\/style><\/pre>\n<\/div>\n<div id=\"bb-example\" > <\/div>\n<\/p>\n<p>A more complicated example blends multiple layers. Change the blending mode of each background with varying results. <\/p>\n<style>\n#b-1 {\nmargin-top: 40px;\nborder: 1px solid red;\nheight: 300px; \nwidth: 30%; \ndisplay: inline-block; margin-right: 1%;\nbackground:\n\tradial-gradient(\n\t\t\tat bottom right,\n\t\t\tdodgerblue 0,\n\t\t\tdodgerblue 1em,\n\t\t\tlightskyblue 1em,\n\t\t\tlightskyblue 2em,\n\t\t\tdeepskyblue 2em,\n\t\t\tdeepskyblue 3em,\n\t\t\tgainsboro 3em,\n\t\t\tgainsboro 4em,\n\t\t\tlightsteelblue 4em,\n\t\t\tlightsteelblue 5em,\n\t\t\tdeepskyblue 5em,\n\t\t\tdeepskyblue 6em,\n\t\t\tlightskyblue 6em,\n\t\t\tlightskyblue 7em,\n\t\t\ttransparent 7em,\n\t\t\ttransparent 8em\n\t\t),\n\t\tradial-gradient(\n\t\t\tat top left,\n\t\t\ttransparent 0,\n\t\t\ttransparent 1em,\n\t\t\tlightskyblue 1em,\n\t\t\tlightskyblue 2em,\n\t\t\tdeepskyblue 2em,\n\t\t\tdeepskyblue 3em,\n\t\t\tlightsteelblue 3em,\n\t\t\tlightsteelblue 4em,\n\t\t\tgainsboro 4em,\n\t\t\tgainsboro 5em,\n\t\t\tdeepskyblue 5em,\n\t\t\tdeepskyblue 6em,\n\t\t\tskyblue 6em,\n\t\t\tskyblue 7em,\n\t\t\tdodgerblue 7em,\n\t\t\tdodgerblue 8em,\n\t\t\ttransparent 8em,\n\t\t\ttransparent 20em ), radial-gradient(\n\t\t\tcircle at center bottom,\n\t\t\tcoral, darkslateblue\n\t\t); background-blend-mode: overlay; background-size: 8em 8em, 8em 8em, cover;}\n#b-2 {\nmargin-top: 40px;\nborder: 1px solid red;\nheight: 300px; \nwidth: 30%; \ndisplay: inline-block; margin-right: 1%;\nbackground:\n\trepeating-radial-gradient(\n\t\tcircle,\n\t\ttransparent,\n\t\ttransparent 3em,\n\t\thotpink 1em,\n\t\t\ttransparent 6em,\n\t\ttomato 6.5em\n\t),\n\trepeating-radial-gradient(\n\t\tellipse farthest-corner,\n\t\ttransparent 1em,\n\t\tcornflowerblue 1em,\n\t\t \ttransparent 5em,\n\t\tcornflowerblue 2em\n\t),\n\trepeating-radial-gradient(\n\t\tcircle,\n\t\ttransparent,\n\t\ttransparent 3em,\n\t\tgold 1em,\n\t\t\ttransparent 2em,\n\t\tgold 4em\n\t),\n\trepeating-radial-gradient(\n\t\tcircle,\n\t\ttransparent 3em,\n\t\tgold 1em,\n\t\t\ttransparent 2em,\n\t\tgold 4em\n\t), white; background-blend-mode: multiply;\nbackground-size: 10em 10em;\nbackground-position: 0 0, 5em 5em, 15em 50em;}\n#b-3 {\nmargin-top: 40px;\nheight: 300px; \nwidth: 30%; \ndisplay: inline-block; \nbackground:\n\trepeating-linear-gradient(\n\t\t#F3F5C4 0,\n\t\t#F3F5C4 3em,\n\t\t#F19181 3em,\n\t\t#F19181 6em\n\t),\n\trepeating-linear-gradient(\n\t\t90deg,\n\t\t#F9CB8F 0,\n\t\t#F9CB8F 3em,\n\t\t#3CBAC8 3em,\n\t\t#3CBAC8 6em\n\t),\n\trepeating-linear-gradient(\n\t\t45deg,\n\t\ttransparent 0,\n\t\ttransparent 6em,\n\t\t#F19181 12em\n\t),\n\trepeating-linear-gradient(\n\t\t-45deg,\n\t\ttransparent 0,\n\t\ttransparent 6em,\n\t\t#F19181 12em\n\t); background-blend-mode: multiply;}<\/p>\n<\/style>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#b-1 {\r\nbackground-blend-mode: overlay; \r\n}\r\n#b-2 {\r\nbackground-blend-mode: multiply; \r\n}\r\n#b-3 {\r\nbackground-blend-mode: multiply; \r\n}\r\n\/* blend-mode = normal | multiply | screen | overlay | darken | lighten | color-dodge |color-burn | hard-light | soft-light | difference | exclusion  *\/<\/style><\/pre>\n<\/div>\n<div id=b><\/div>\n<div id=b-1><\/div>\n<div id=b-2><\/div>\n<div id=b-3><\/div>\n<h2>Blending Elements<\/h2>\n<\/p>\n<p>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.\n<\/p>\n<p>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 <code>z-index<\/code> or change the blending modes to see how these elements interact<\/p>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#mb-example {\r\nheight: 500px;\r\nwidth: 100%;\r\nposition: relative;\r\nborder: 1px solid red;\r\nbackground: hsla(50,50%,70%,.5);\r\ncolor: hsla(280,100%,50%,.3);\r\noverflow: hidden;\r\nz-index: 10;\r\nisolation: isolate;}\r\n#mb-example div {\r\nwidth: 500px;\r\nheight: 333px;\r\nposition: absolute;\r\nfont-size: 6em;\r\ncolor: blue;\r\n}\r\n#mb-example div:nth-child(2) {\r\nbackground: red;\r\ntop: 0px;\r\nleft: 0px;\r\nz-index: -2;\r\nmix-blend-mode: multiply;\r\n}\r\n#mb-example div:nth-child(3) {\r\ntop: 20%;\r\nright: 5px;\r\nz-index: 30;\r\nbackground: url(http:\/\/b.parsons.edu\/~dejongo\/12-fall\/stuff\/08_transition-1.jpg);\r\nmix-blend-mode: difference;\r\n}\r\n#mb-example div:nth-child(4) {\r\nbottom: 0px;\r\nbackground:  pink;\r\nz-index: 80;\r\nmix-blend-mode: exclusion;\r\n}\/* blend-mode = normal | multiply | screen | overlay | darken | lighten | color-dodge |color-burn | hard-light | soft-light | difference | exclusion  *\/<\/style><\/pre>\n<\/div>\n<div id=\"mb-example\" >\n<p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <\/p>\n<div>Title<\/div>\n<div><\/div>\n<div>Title<\/div>\n<\/p>\n<\/div>\n<h2>Complex Blend Effects<\/h2>\n<p><a href=\"https:\/\/bennettfeely.com\/image-effects\/\"> Complex Blend Effects<\/a><\/p>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n.pencil-effect {\r\n  background-image: url(http:\/\/b.parsons.edu\/~dejongo\/12-fall\/stuff\/08_transition-2.jpg);\r\n  background-size: cover;\r\n  background-position: center;\r\n}\r\n\r\n@supports (filter: invert(1)) and (background-blend-mode: difference) {\r\n  .pencil-effect {\r\n    background-image: url(photo.jpg), url(photo.jpg);\r\n    background-blend-mode: difference;\r\n    background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px);\r\n    filter: brightness(2) invert(1) grayscale(1);\r\n    box-shadow: inset 0 0 0 1px black;\r\n  }\r\n\r\n<\/style><\/pre>\n<\/div>\n<div class=\"pencil-effect\"><\/div>\n<h2>Masks<\/h2>\n<\/p>\n<p>Masks allow you to use an image or a <a href=\"http:\/\/cssplant.com\/clip-path-generator\">polygon clip path<\/a> to reveal only part of an element. Just like in Photoshop, the white areas display and the black areas do not.<br \/>\npeace<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 &hellip; <a href=\"https:\/\/b.parsons.edu\/~dejongo\/10-compositing-and-blending\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[15],"tags":[],"_links":{"self":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/2844"}],"collection":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/comments?post=2844"}],"version-history":[{"count":90,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/2844\/revisions"}],"predecessor-version":[{"id":4740,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/2844\/revisions\/4740"}],"wp:attachment":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/media?parent=2844"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/categories?post=2844"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/tags?post=2844"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}