Rounded Images

Quick reference

• 00:05 In this video, I wanna talk about rounded images.
• 00:08 So let's come back here and let's use our hike image, img src=hike.png.
• 00:15 And let's give this a height of 200 pixels,
• 00:21 height = 200 pixels, we just say 200.
• 00:27 Save this and hit reload, we get this.
• 00:30 Now we can round the corners of this thing and
• 00:32 we've already sort of dealt with this a little bit in the past.
• 00:35 Let's go and
• 00:36 actually first I wanna check to make sure I don't have any other image CSS thing.
• 00:40 So okay, let's create an image and very easily we just go border-radius,
• 00:46 and we've seen this before, and let's say 10 pixel.
• 00:51 So if we save this and hit reload, we get this very subtle rounding of images.
• 00:56 We did this with backgrounds previously.
• 00:58 But we can be even more dramatic and we don't have to use pixels,
• 01:02 we can also use percentages.
• 01:03 So if we go 50%, boom, we get this huge thing.
• 01:07 And you see this a lot in avatars for blog comments and things like that.
• 01:10 They'll make these rounded images and that's an easy way to do that.
• 01:14 Another sort of neat effect is to give it a border, and then round that border.
• 01:18 So we can come back here and
• 01:21 I'm just going to go border one pixel, we'll call it solid.
• 01:27 And let's give it cccccc,
• 01:33 so, if we save this and hit reload, we can sort of make out that border around there.
• 01:39 But if we come back here and give this a border-radius
• 01:45 of 5 pixels and then create some padding, let's go 6 pixels.
• 01:53 And then, well, let's just see what that does.
• 01:55 We have this kinda cool border around it and
• 02:00 it's curved like that, which is really very cool.
• 02:03 We can do some other kinda weird stuff.
• 02:04 We can give this an opacity.
• 02:06 Let's go opacity, we haven't really talked about opacity but
• 02:09 that's how you deal with transparencies.
• 02:11 And if we go 0.5 and save that.
• 02:16 See it sort of becomes a little slightly transparent looking.
• 02:19 And it's kind of a weird effect.
• 02:21 But kind of neat too.
• 02:22 So let's get rid of that.
• 02:23 We can try maybe a box shadow.
• 02:27 And let's just go 1 pixel 1 pixel 1 pixel black.
• 02:36 So we get this sort of shadowy thing.
• 02:38 Maybe if we give this 10.
• 02:41 It becomes sort of blurry, so we can play around with this.
• 02:46 All kinds of cool stuff you can do with this and
• 02:48 it's really, this is one of the nice things about CSS.
• 02:50 In the past, you would had to have created this whole thing in Photoshop and
• 02:54 then just pasted it in as its own image.
• 02:56 Now you can play around with these things just with CSS and very fun and
• 03:00 very easy to do.
• 03:01 And really it's just up to your own imagination what you do with all of
• 03:04 this stuff.

Lesson notes are only available for subscribers.