Border Images

Quick reference

• 00:05 In this video, I wanna talk about using images for borders.
• 00:08 So first thing, I've created this little image,
• 00:11 I'm just gonna pull it into our app.
• 00:14 Like we have in the past so that we can access it.
• 00:17 And let's just look at this real quick,
• 00:21 <img src="border.png">, save this, hit reload.
• 00:28 So here's our image.
• 00:29 It's just this basic dotted thing I've created really quickly.
• 00:33 So we can use that to make a border of things.
• 00:36 And it's pretty simple.
• 00:37 When you think about this you need to think of slicing your image into nine
• 00:41 sections.
• 00:42 Sort of like a Tic-Tac-Toe board.
• 00:43 And then you place the corners at the corners and
• 00:46 the middles in the middles and you'll stretch everything else.
• 00:49 So, how does this work?
• 00:50 So, basically, you come up here and go, border image
• 00:56 and so we start out, we define this border and
• 00:59 let's give it ten pixels and call it solid and let's make it transparent.
• 01:05 Okay.
• 01:06 Now, let's see.
• 01:07 Let's give it a padding of 15 pixels.
• 01:10 And here's where it gets a little weird.
• 01:14 We do this -webkit-border-image and then a URL of border.png.
• 01:21 We've added URLs before.
• 01:24 Oops, misspelled URL.
• 01:27 URL.
• 01:29 Now let's call this 30 and a round and you'll see what that is in just a second.
• 01:33 Now we also need to do this a couple more times.
• 01:35 So webkit is for specific web browsers.
• 01:38 We also need to do -o-order-image, gonna do the same thing.
• 01:44 URL border.png.
• 01:47 Give it a 30 and round.
• 01:49 And this is for Safari browsers.
• 01:52 The o border.
• 01:53 Apple products.
• 01:53 We also need to do border-image and
• 01:57 then URL border 30 round.
• 02:01 And this is for Opera web browsers, it's just a different type of web browser.
• 02:07 So to use this we can just create a p with an id="borderimage that
• 02:14 we just created, and this is some text.
• 02:20 Save this, come back here and hit reload and nothing.
• 02:23 Let's see what I did, border.
• 02:25 I forgot to put the .png.
• 02:27 So let's save this.
• 02:28 Now, we hit reload.
• 02:29 Boom, we get this nice stretched thing.
• 02:32 So that's pretty cool, right?
• 02:33 That's a little bit weird because what is all this stuff?
• 02:37 Well, let's go 10 and see what happens.
• 02:40 So that sort of changes it around it, slices it slightly differently.
• 02:45 You go 50, changes it again.
• 02:49 So all kinds if weird stuff you can do with this.
• 02:51 Change this back to 30 and instead of round we go stretch.
• 02:57 Save this, hit reload, and we get this weird stretchy thing.
• 03:01 So it's taking out the thing in the middle and stretching it instead of repeating it.
• 03:05 So this border image property here, here, and here.
• 03:09 This is shorthand again.
• 03:11 Basically, we're looking at border image source, which is this guy.
• 03:15 Border image slice which is this guy, border image outset which we didn't deal
• 03:20 with and border image repeat which is round versus stretch versus whatever.
• 03:25 So that's border image.
• 03:27 It's kind of weird, but kind of cool and that's all for this video.

Lesson notes are only available for subscribers.