Locked lesson.
About this lesson
Adding Rounded features to images with CSS.
Exercise files
Download this lesson’s related exercise files.
Rounded Images.docx58.8 KB Rounded Images - Solution.docx
58.9 KB
Quick reference
Rounded Images
Rounding images is a nice visual effect.
When to use
Any image can be rounded.
Instructions
To round an image, use the border-radius property with either pixels or percentages.
border-radius: 5px;
or
border-radius: 10%;
To make an image transparent, give it an opacity property:
opacity: 0.5;
To make an image rounded and give it a cool outline:
img {
border: 1px solid #cccccc;
border-radius: 5px;
padding:10px;
}
Hints & tips
- border-radius: 10px;
- border-radius: 50%;
- opacity: 0.5;
- 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.