1 00:00:00,000 --> 00:00:04,801 [MUSIC] 2 00:00:04,801 --> 00:00:05,521 Hey everyone. 3 00:00:05,521 --> 00:00:06,401 Guil here. 4 00:00:06,401 --> 00:00:10,713 In this workshop, I'll show you how to use an exciting CSS feature that resembles 5 00:00:10,713 --> 00:00:15,500 a tool you'd normally find in your favorite graphics editor, blend modes. 6 00:00:15,500 --> 00:00:20,280 So CSS blend modes define how two or more layers are blended together and 7 00:00:20,280 --> 00:00:23,340 they let you create some really exciting visual effects. 8 00:00:23,340 --> 00:00:27,010 Now, these blending effects are frequently used in graphic design or 9 00:00:27,010 --> 00:00:30,970 digital image editing, but you can recreate those same blending effects 10 00:00:30,970 --> 00:00:33,560 in the browser, using CSS blend modes. 11 00:00:33,560 --> 00:00:34,800 Let me show you how. 12 00:00:34,800 --> 00:00:39,000 Blend modes are part of compositing and blending CSS specification. 13 00:00:39,000 --> 00:00:41,150 So, what's compositing and blending? 14 00:00:41,150 --> 00:00:44,850 Well compositing is what combines an element with its backdrop. 15 00:00:44,850 --> 00:00:48,960 And the back drop is the content behind the element. 16 00:00:48,960 --> 00:00:53,480 Now blending is a form of compositing that calculates the mixing of colors 17 00:00:53,480 --> 00:00:56,270 wherever an element and a backdrop overlap. 18 00:00:56,270 --> 00:00:59,890 Now with CSS we can blend an HTML element's background layer 19 00:00:59,890 --> 00:01:00,700 with another layer. 20 00:01:00,700 --> 00:01:05,340 And the background layer can be an image, a gradient or a background color. 21 00:01:05,340 --> 00:01:08,530 So, before we move on let's first take a look at a few 22 00:01:08,530 --> 00:01:13,640 neat examples of the effects we're able to achieve with CSS blend modes. 23 00:01:13,640 --> 00:01:17,530 So in this first example created by Adobe, 24 00:01:17,530 --> 00:01:21,480 we can see how the main background image is originally black and 25 00:01:21,480 --> 00:01:26,270 white but then we're able to see how the hues change once they're blended 26 00:01:26,270 --> 00:01:31,520 with the different background colors of the main development in the foreground. 27 00:01:31,520 --> 00:01:32,890 Pretty cool. 28 00:01:32,890 --> 00:01:37,620 So, next, we have a fun and creative demo by Bennett Feely, 29 00:01:37,620 --> 00:01:40,990 that shows some of the potential presidential candidates. 30 00:01:40,990 --> 00:01:44,670 Now, what's cool about this is, is that the images of the Democratic party 31 00:01:44,670 --> 00:01:49,760 candidates blend with a blue background layer, while the Republican 32 00:01:49,760 --> 00:01:54,210 party images blend with a red background layer as you can see here. 33 00:01:54,210 --> 00:01:56,210 And what's neat is that on hover, 34 00:01:56,210 --> 00:01:59,880 the images transition back to the original image. 35 00:01:59,880 --> 00:02:04,620 So a nice subtle effect and a great use of CSS blend modes. 36 00:02:04,620 --> 00:02:09,420 So now I'm gonna show you how to create a few of your own blending effects with CSS. 37 00:02:09,420 --> 00:02:14,290 CSS currently has two properties you can use to blend elements together 38 00:02:14,290 --> 00:02:17,000 using one of the 16 available blend modes. 39 00:02:17,000 --> 00:02:22,390 Those properties are background-blend-mode and mix-blend-mode. 40 00:02:22,390 --> 00:02:25,540 So first you can use the background-blend-mode 41 00:02:25,540 --> 00:02:29,198 property when you want to blend two or more background layers. 42 00:02:29,198 --> 00:02:34,145 And the mixed-blend-mode property will let you blend with the content of any HTML or 43 00:02:34,145 --> 00:02:37,050 SVG element that's painted underneath. 44 00:02:37,050 --> 00:02:37,960 So first, 45 00:02:37,960 --> 00:02:42,360 we'll take a look at what we're able to do with the background-blend-mode property. 46 00:02:42,360 --> 00:02:45,040 So now I'm gonna jump on over to my project files 47 00:02:45,040 --> 00:02:49,680 where I already have an HTML file linked to a style sheet. 48 00:02:49,680 --> 00:02:52,600 And this is where we're going to create our blending effects. 49 00:02:52,600 --> 00:02:56,220 Now when I preview the web page, you can see that it's nothing 50 00:02:56,220 --> 00:03:00,600 more than a nice full-page background image and some content. 51 00:03:00,600 --> 00:03:04,530 So the background blend mode property is commonly used to blend together 52 00:03:04,530 --> 00:03:09,250 an element's background image with another image behind it or a background color. 53 00:03:09,250 --> 00:03:12,830 And when we specify the background-blend-mode property and 54 00:03:12,830 --> 00:03:16,710 a blend mode value it mixes that background image and 55 00:03:16,710 --> 00:03:19,260 color together based on the blend mode we set. 56 00:03:19,260 --> 00:03:23,130 And that mixing of colors only happen wherever an element 57 00:03:23,130 --> 00:03:24,770 overlaps with it's backdrop. 58 00:03:24,770 --> 00:03:26,870 So let's see how this happens. 59 00:03:26,870 --> 00:03:29,710 I'm going to go back to the style sheet. 60 00:03:29,710 --> 00:03:32,610 And scroll down to the body rule. 61 00:03:32,610 --> 00:03:36,060 And I'm going to give the body element a background color. 62 00:03:36,060 --> 00:03:41,305 So I'm going to add a hex value in this background declaration of 63 00:03:41,305 --> 00:03:47,410 6de590. 64 00:03:47,410 --> 00:03:51,210 And when we preview the color, we can see that it's a light shade of green. 65 00:03:51,210 --> 00:03:54,290 So, now, the green background color layer 66 00:03:54,290 --> 00:03:58,500 is our backdrop; it's behind the main background image where it usually is. 67 00:03:58,500 --> 00:04:00,990 So, nothing special is happening just yet. 68 00:04:00,990 --> 00:04:06,000 But watch what happens if we go back and add a blend mode to the body element. 69 00:04:06,000 --> 00:04:10,335 So right beneath the background declaration, let's add the CSS property 70 00:04:10,335 --> 00:04:15,275 background-blend-mode. 71 00:04:16,820 --> 00:04:18,335 So the default value for 72 00:04:18,335 --> 00:04:22,810 background-blend-mode is normal, which specifies no blending. 73 00:04:22,810 --> 00:04:27,566 So let's see how the value multiply will affect our background layers. 74 00:04:27,566 --> 00:04:32,686 [BLANK_AUDIO] 75 00:04:32,686 --> 00:04:35,742 So just like in a graphics editor like Photoshop, 76 00:04:35,742 --> 00:04:40,765 the multiply blend mode darkens the image by multiplying the colors in the body's 77 00:04:40,765 --> 00:04:45,690 element background image by that light green background color we defined. 78 00:04:45,690 --> 00:04:46,798 Really neat. 79 00:04:46,798 --> 00:04:51,350 If you wanna learn all about the 16 different blend mode values, you can check 80 00:04:51,350 --> 00:04:56,830 out the link to the web platform docs on blend modes in the teacher's notes. 81 00:04:56,830 --> 00:05:00,260 Now, as you might have noticed, these are pretty much the same blend modes that come 82 00:05:00,260 --> 00:05:03,100 in a graphics editor like Photoshop or Sketch. 83 00:05:03,100 --> 00:05:06,850 And each of these values will give you a different result. 84 00:05:06,850 --> 00:05:10,170 So, while we're here, let's try out a few more of these blend modes. 85 00:05:10,170 --> 00:05:13,070 So let's try screen, for instance. 86 00:05:13,070 --> 00:05:18,660 So back in the style sheet, I'm going to change the value multiply to screen. 87 00:05:21,660 --> 00:05:25,730 With screen, the blended result color depends on the backdrop's color. 88 00:05:25,730 --> 00:05:29,160 So, if screening any color with white, will produce all white, 89 00:05:29,160 --> 00:05:33,040 while screening with black will leave our background unchanged. 90 00:05:33,040 --> 00:05:38,760 So here since our background color is a light shade of green, once we 91 00:05:38,760 --> 00:05:43,780 preview our web page, we can see how the screen blend mode lightens our background. 92 00:05:43,780 --> 00:05:45,460 So let's go back and try a couple more. 93 00:05:45,460 --> 00:05:51,040 So now we're going to replace screen with the overlay blend mode. 94 00:05:51,040 --> 00:05:55,760 And once we save and refresh, we can see that it lightens or 95 00:05:55,760 --> 00:06:00,690 screens the colors to reflect the lightness of the green backdrop color. 96 00:06:00,690 --> 00:06:04,660 It actually overlays the background image, while preserving it's highlights and 97 00:06:04,660 --> 00:06:06,050 shadows. 98 00:06:06,050 --> 00:06:06,650 Cool. 99 00:06:06,650 --> 00:06:07,640 So let's do one more. 100 00:06:07,640 --> 00:06:13,440 Let's go back and try the blend mode value hard-light. 101 00:06:13,440 --> 00:06:16,605 So once I save and refresh our web page, 102 00:06:16,605 --> 00:06:20,270 we can see how this multiplies or screens the colors. 103 00:06:20,270 --> 00:06:22,830 And it also depends on the source color value. 104 00:06:22,830 --> 00:06:23,800 Now in this case, 105 00:06:23,800 --> 00:06:27,840 the effect is similar to shining a bright spotlight on the background. 106 00:06:27,840 --> 00:06:31,180 We get this hard contrast in our image. 107 00:06:31,180 --> 00:06:35,360 Let's go back and stick with the multiply blend mode moving forward. 108 00:06:36,510 --> 00:06:39,070 What's also great about background-blend-mode 109 00:06:39,070 --> 00:06:44,090 is that we're able to use it all HTML elements, even canvas and video elements. 110 00:06:44,090 --> 00:06:47,860 And it also works with CSS gradients and multiple backgrounds. 111 00:06:47,860 --> 00:06:50,680 And this can create some interesting effects. 112 00:06:50,680 --> 00:06:53,740 So for example, let's go back to our style sheet. 113 00:06:53,740 --> 00:06:58,660 And instead of a background color, let's make the backdrop a CSS gradient. 114 00:06:58,660 --> 00:07:01,220 Now gradients are actually background images. 115 00:07:01,220 --> 00:07:02,430 They're not colors. 116 00:07:02,430 --> 00:07:06,070 So we'll need to use the multiple background syntax. 117 00:07:06,070 --> 00:07:11,730 So first I'm going to remove the background color value we just defined. 118 00:07:11,730 --> 00:07:16,930 And as the second background value we're going to declare a radial-gradient. 119 00:07:16,930 --> 00:07:20,631 So let's type radial-gradient. 120 00:07:20,631 --> 00:07:27,170 And let's make the first color a hex value of 6de590. 121 00:07:27,170 --> 00:07:31,950 And let's make the second 122 00:07:31,950 --> 00:07:36,180 color #e67478. 123 00:07:36,180 --> 00:07:40,410 All right, so once we save our style sheet and 124 00:07:40,410 --> 00:07:44,430 refresh the web page, notice how we get a really nice effect 125 00:07:44,430 --> 00:07:49,180 that blends the images according to the colors of that radial-gradient. 126 00:07:49,180 --> 00:07:51,310 Now, I'm gonna go back to the style sheet. 127 00:07:51,310 --> 00:07:56,430 And this time I'm going to set it as a linear-gradient to see what happens. 128 00:07:56,430 --> 00:08:01,810 So once I save and refresh, we get the same effect except now the browser 129 00:08:01,810 --> 00:08:07,060 multiplies the colors based on the progression colors in the linear gradient. 130 00:08:07,060 --> 00:08:11,910 We're also able to blend any HTML or SVG element with our backdrop or 131 00:08:11,910 --> 00:08:13,450 any content underneath. 132 00:08:13,450 --> 00:08:16,130 And again, this can create some really cool effects. 133 00:08:16,130 --> 00:08:19,050 So lets try this out on our heading next. 134 00:08:20,110 --> 00:08:26,370 So in the index.html, file notice the span elements nested inside the h1. 135 00:08:27,480 --> 00:08:30,020 Each letter is wrapped in a span. 136 00:08:30,020 --> 00:08:34,060 Now those are there for a reason and you'll see why in just a bit. 137 00:08:34,060 --> 00:08:40,190 So, first, we're gonna need these letters in the heading here to overlap. 138 00:08:40,190 --> 00:08:45,530 So I'm going to define a letter spacing property for the h1. 139 00:08:45,530 --> 00:08:49,760 So in the h1 rule, let's say letter-spacing and 140 00:08:49,760 --> 00:08:53,150 then I'm going to use a negative value to make the letters overlap. 141 00:08:53,150 --> 00:08:55,845 So I'm gonna make the value -2rem. 142 00:08:55,845 --> 00:09:00,270 And I'm also going to give the heading 1 a color. 143 00:09:00,270 --> 00:09:05,325 So I'll set to the hex value 6b845d. 144 00:09:07,610 --> 00:09:12,180 So once I save and refresh, we're now able to see the letters 145 00:09:12,180 --> 00:09:16,520 overlapping each other but they're all the same color so it's kind of hard to tell. 146 00:09:16,520 --> 00:09:21,010 So next, to see the blending effects wherever the letters overlap, 147 00:09:21,010 --> 00:09:25,790 I'll need to make them different colors and this is why I originally wrapped each 148 00:09:25,790 --> 00:09:30,000 letter inside a span element so I can target and style them individually. 149 00:09:30,000 --> 00:09:31,110 So, to do this, 150 00:09:31,110 --> 00:09:35,150 I'm going to use the nth-child pseudoclass to target each individual letter. 151 00:09:35,150 --> 00:09:38,820 So we've already set one of the colors to that shade of green. 152 00:09:38,820 --> 00:09:40,950 So that'll be the first letter's color. 153 00:09:40,950 --> 00:09:46,590 So let's select the second one by saying span nth-child. 154 00:09:46,590 --> 00:09:50,510 And inside the parenthesis I'm gonna say that I wanna target the second 155 00:09:50,510 --> 00:09:52,020 span element. 156 00:09:52,020 --> 00:09:58,910 And then I'll set the color to #801b3a. 157 00:09:58,910 --> 00:10:01,420 And this gives me a darker shade of red. 158 00:10:01,420 --> 00:10:06,270 So next I'm just gonna copy the one I wrote and 159 00:10:06,270 --> 00:10:11,820 this time target the third span element by saying, nth-child(3). 160 00:10:11,820 --> 00:10:19,601 And I"m going to change the color value to #164d67. 161 00:10:19,601 --> 00:10:21,721 [BLANK_AUDIO] 162 00:10:21,721 --> 00:10:25,500 And as you can see, this gives me a dark shade of blue. 163 00:10:25,500 --> 00:10:30,095 Now there's also a handy jQuery plugin called Lettering.js that will give 164 00:10:30,095 --> 00:10:34,730 you this type of down to the letter control without having to use any spans. 165 00:10:34,730 --> 00:10:36,950 Now I'm only using three letters here so 166 00:10:36,950 --> 00:10:40,470 it's okay but check it out in the teacher's notes of this workshop. 167 00:10:40,470 --> 00:10:42,940 I've added a link to that jQuery plugin. 168 00:10:42,940 --> 00:10:45,640 Right. So I'll save the style sheet. 169 00:10:45,640 --> 00:10:51,040 And once I refresh, we're able to see the overlapping areas of our text. 170 00:10:51,040 --> 00:10:51,670 Cool. 171 00:10:51,670 --> 00:10:52,510 So next, 172 00:10:52,510 --> 00:10:57,650 I'll need to define a blend mode that will blend these overlapping parts together. 173 00:10:57,650 --> 00:11:00,710 Now, since we're not blending background colors this time, 174 00:11:00,710 --> 00:11:03,970 we actually want to blend the element's text color. 175 00:11:03,970 --> 00:11:08,110 The background-blend-mode property we used earlier will not work. 176 00:11:08,110 --> 00:11:12,300 So, now, we'll need to use the mix-blend-mode property. 177 00:11:12,300 --> 00:11:17,320 So as I mentioned earlier, the mix-blend-mode property blends the content 178 00:11:17,320 --> 00:11:22,040 of any HTML or SVG element that's painted underneath. 179 00:11:22,040 --> 00:11:23,590 Not just a background layer. 180 00:11:23,590 --> 00:11:28,150 And it also accepts the same 16 blend mode values we talked about earlier. 181 00:11:28,150 --> 00:11:29,680 So let's use that property. 182 00:11:29,680 --> 00:11:33,668 So I'm gonna scroll down to the bottom of the style sheet. 183 00:11:33,668 --> 00:11:38,230 And I'm gonna target these span elements inside the h1 with a descendant selector. 184 00:11:38,230 --> 00:11:42,127 So we'll say, h1 span and 185 00:11:42,127 --> 00:11:47,561 add the mix-blend-mode property. 186 00:11:47,561 --> 00:11:50,671 And I'm gonna set the blend mode to multiply. 187 00:11:50,671 --> 00:11:52,930 [BLANK_AUDIO] 188 00:11:52,930 --> 00:11:57,248 So first let me scroll up and comment out the body background color so 189 00:11:57,248 --> 00:12:02,760 we can really see how they multiply blend mode works against a white background. 190 00:12:02,760 --> 00:12:07,590 So I'm going to select and comment out the entire background declaration. 191 00:12:08,610 --> 00:12:11,800 And once I save and refresh our webpage, 192 00:12:11,800 --> 00:12:17,370 we can see how the overlapping parts between the letters are clearly defined. 193 00:12:17,370 --> 00:12:22,300 Notice how the multiplied blend mode darkens any of the overlapping areas. 194 00:12:23,940 --> 00:12:28,630 So now I'll go back and reapply the main background image by uncommenting out 195 00:12:28,630 --> 00:12:30,620 the background declaration. 196 00:12:30,620 --> 00:12:35,670 And since our body background is quite dark, as you can see here, 197 00:12:35,670 --> 00:12:39,890 the multiply blend mode now darkens the text color. 198 00:12:39,890 --> 00:12:42,260 It's almost pure black and we can't see it. 199 00:12:42,260 --> 00:12:47,328 So because of this, I am going to go back to the style sheet and change the span's 200 00:12:47,328 --> 00:12:52,630 mix-blend-mode to screen. 201 00:12:52,630 --> 00:12:57,110 So now when I save our style sheet and refresh the preview, 202 00:12:57,110 --> 00:13:00,370 since the body background is now back to being a dark color, 203 00:13:00,370 --> 00:13:06,590 the overlapping parts of the text are now lightened by the screen blend mode value. 204 00:13:06,590 --> 00:13:11,310 So blend modes are a neat CSS effect you can use to enhance headlines, 205 00:13:11,310 --> 00:13:14,330 icons or any part of a web site. 206 00:13:14,330 --> 00:13:16,640 But you don't want to over use them. 207 00:13:16,640 --> 00:13:19,630 Because too many blending effects can ruin the effect or 208 00:13:19,630 --> 00:13:22,560 magic you're trying to achieve in your design. 209 00:13:22,560 --> 00:13:28,020 So it's best to use it in a subtle way like on a site headers background image or 210 00:13:28,020 --> 00:13:32,130 like in Bennett Feely's presidential candidate example we saw earlier. 211 00:13:32,130 --> 00:13:34,340 And you can also take a look at the teacher's note for 212 00:13:34,340 --> 00:13:36,769 other great examples of blend modes in use. 213 00:13:37,860 --> 00:13:41,430 So the browser support for blend modes is looking pretty good. 214 00:13:41,430 --> 00:13:45,698 Chrome, Safari and Firefox support both the background-blend-mode and 215 00:13:45,698 --> 00:13:49,770 mix-blend-mode properties without any vendor prefixes. 216 00:13:49,770 --> 00:13:55,290 Unfortunately, Internet Explorer does not support these advanced blend modes. 217 00:13:55,290 --> 00:13:59,770 But the good news is that Modernizr has added feature detection for 218 00:13:59,770 --> 00:14:01,470 CSS blend modes. 219 00:14:01,470 --> 00:14:06,290 This way we're at least able to provide a fallback for IE browsers if we need to. 220 00:14:06,290 --> 00:14:09,420 Now blend modes are an enhancement feature. 221 00:14:09,420 --> 00:14:12,700 So if they're not supported by our browser, you should still make sure 222 00:14:12,700 --> 00:14:17,510 that your site or content is still presentable or readable to users. 223 00:14:17,510 --> 00:14:21,900 Being able to apply Photoshop like blending effects to HTML content 224 00:14:21,900 --> 00:14:26,540 with CSS syntax gives us more power and flexibility when designing for the Web. 225 00:14:26,540 --> 00:14:31,040 You see, graphic editing features that are negative to the browser brings us 226 00:14:31,040 --> 00:14:36,020 closer to removing our reliance on graphic editing software and that's exciting. 227 00:14:36,020 --> 00:14:38,210 So it's always great to experiment with and 228 00:14:38,210 --> 00:14:42,620 use CSS features even before they're supported in every browser. 229 00:14:42,620 --> 00:14:43,990 That's how we moved the web forward.