Shadows

Quick reference

• 00:05 In this video, I wanna talk about shadows.
• 00:07 Now, we've already talked about text shadows a little bit in the past, but
• 00:10 we can do all kinds of other cool stuff with shadows.
• 00:12 And so, that's what I wanna do in this video.
• 00:14 So, let's create an h2.
• 00:16 We've got an h1 already.
• 00:17 And let's give a text-shadow and lets give this a two pixel,
• 00:23 and a two pixel, and lets say a four pixel.
• 00:26 And for the color, let's go black, and
• 00:30 let's set this text color to white to begin with.
• 00:33 So if we come back here to our index page, crate an h2 tag, this is a shadow.
• 00:41 Save this and hit reload, we get this white text with a black shadow, so
• 00:45 that's kinda cool.
• 00:46 >> But we already know how to do this.
• 00:47 So what else can we do?
• 00:48 >> Well we can also do multiple shadows.
• 00:51 So if we'll come back here all we have to do is then designate another one.
• 00:55 So let's go zero zero thirty pixels and let's say blue.
• 00:59 We need a comma there.
• 01:02 We need to separate each set of values by a comma.
• 01:05 So now if If we hit reload, we get this dark shadow on the inside and
• 01:08 sort of a blurry shadow of blue on the outside, so that's pretty cool.
• 01:12 Another thing we can do is create borders around the text.
• 01:17 Right? So, let's keep this white,
• 01:19 so lets change this black text shadow.
• 01:22 So we want to put a border all the way around the text so
• 01:24 we need four different things, top, bottom, left, and right.
• 01:27 So lets go -1, 0, lets just call this black, and
• 01:33 we want 01 pixel black, and then 1 pixel 0 and black.
• 01:39 And then 0 -1 pixel and black.
• 01:45 So, we save this come back here and hit reload.
• 01:48 We get this sort of outline around the text so that's kinda cool.
• 01:52 What else can we do?
• 01:52 Well, there is also something called a box shadow.
• 01:56 So if we come back here, let's create a new div and
• 02:00 let's give it a box-shadow property.
• 02:04 And let's say we want 10 pixels and 10 pixels.
• 02:09 Save this.
• 02:10 Actually, let's also give it a padding of 20 pixels.
• 02:16 So, if we come back here and create a DIV and this is a box.
• 02:23 Save it.
• 02:24 Hit reload, we get this, well it's kind of hard to tell but this is a shadow.
• 02:29 And if we come back here to our DIV and give it a color of
• 02:36 a background color green.
• 02:39 There we go, so now we have a box and then it has a shadow that's black.
• 02:43 And of course we can change this around if we want.
• 02:49 Make it smaller, we can do all of the things.
• 02:53 Give it some blurriness.
• 02:56 All of the stuff we've learned in the past.
• 02:57 We can do that.
• 02:58 And like the last one we talked about, we can add different things here.
• 03:03 So we can go, -10 pixels, -10 pixels, and 20 pixels.
• 03:12 Save this, then we get this thing above it.
• 03:15 So all of shadowy stuff you can do with text you can also do it with boxes or
• 03:19 divs, or anything else for that matter.
• 03:20 And, yeah, it's pretty fun.
• 03:22 So I like shadows.
• 03:23 I like playing with them.
• 03:24 There's all kinds of subtle, graphical things you can do.
• 03:26 Subtle design type things you can do with shadows and it's really cool.

Lesson notes are only available for subscribers.