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.