FREELessons: 10Length: 34 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 Flowing Text Around Shapes

The shape-outside CSS property is starting to gain wider usage. Though its implementation is still a little inconsistent, it can still be used to great effect, with nice fallbacks for browsers that don’t support it.

Relevant Links

2.1 Flowing Text Around Shapes

Hello and welcome back. In this lesson I want to take a look at a little used method for flowing text around images. And the reason it's not used very often is because it's not full supported yet. At the time of this recording, you can't achieve this effect using Internet Explorer, or Edge, or even Firefox. But we can do it in Chrome, and it's worth at least taking a look at it. Because even if you're using a browser that doesn't support it, your images will still float to the left, so it's still gonna look okay. And the way we're going to accomplish this is we're gonna use a CSS property called shape-outside. And there's a few different ways we can do this, we can use a shape such as a circle. We can tell our CSS what the radius of that circle is going to be, and then the text will fall around that circle. We can give it another shape such as a polygon or we can use something called inset which allows us to create a rectangular inset in a paragraph to flow around a certain image. And then we can also use the boundaries of a semi-transparent PNG file and flow around those boundaries. So let's start with a circle. So we're using CodePen for all of our projects In this course. And you can find the URL for this opening Pen in your course notes for this lesson. Once you open up that Pen, go ahead and click on Fork to create a new copy of it and we'll get started with this new copy. So if we look at our HTML here, we've got an image, followed by a paragraph, and I want to flow this paragraph around that image. So we're gonna start by floating the image to the left. This property at this current point in time only works with floated images. And so we're gonna float it to the left, and then we're gonna use the shape outside property to create a circle that the text is going to flow around. So you'll see that this image has a class of megaphone, that's the class we're gonna be targeting here. So we'll jump into our CSS and we'll create a new rule for the megaphone class, and i want it to float to the left first of all. And what we see now is exactly what you would see if you were to try this technique in Internet Explorer or Firefox. So another thing you might do is you might add a little margin around that image just to give it a little space, there we go. And then we can use the shape outside property to create that circle. So again, it's called shape-outside and the way we do this with a circle is we type in the word circle and then inside parentheses, we can define the radius of that circle. Now as you can see the default actually works really well but we can also put the radius to the circle inside here. So if I say 50%, then the radius will be 50% of the width of that circle, and that semicolon actually used to go outside the parenthesis. But there we go, so just by adding one CSS property here we've created this nice shape that our text can float around. So the text doesn't really know about this image, we've just created a circle that is the same size as that Image to make it look like the text knows what's going on there. So now let's move on to this second section, and I'm gonna create a rectangular insert this time using this image of a computer. So that computer image has a class of desktops so we are going to point the desktop class here. And just like before, we are gonna float to the left and then here we go. So by default, we can see everything flowing around that and this particular image has a lot of white space around it but we can inset that white space a little bit so it is not floating all the way around the image like that. And the way we do that is again using the shape outside property and this time instead of circle, we're gonna use inset. So inside the parenthesis for inset, we're going to define four values here. And these four values represent how far we want to inset it on all four sides. So it's gonna start on the top and it's gonna move in a clockwise direction. So the first value here will be for the top. And I'm gonna go ahead and put four zeroes here, so we're not gonna see any change whatsoever. And then we'll change these one value at a time. So I'll take this first one here,and I'm going to set it to 40 pixels. When we do that, you'll see that our text comes down a little bit over the top of the image. If we were to bring this down even further to say 80 pixels, you'll see that the text comes down even further. Obviously we don't want it that far, so we'll just move that back to 40. So for our right inset I'm going to do 20 pixels and that'll bring the text in a little bit closer to our image. Then for the bottom, we're gonna use a value of 40 pixels there as well and that will bring the text up from the bottom. And then for the left, I'm gonna lave that at 0. Now like image in before and this particular case this image has a lot of white space around it. And so, I wanna pull this image over to the left a little bit. So I'm just gonna use the position property and set it to relative and then set the left position to about negative 20 pixels and that will pull it over to the left, and that looks a little better. So that's the inset value for our shape outside property. Next, I wanna look at our transparent PNG file here. So this is a transparent PNG, it has some transparent pixels around the outside edge. So this particular image has a class of logo, let me double check that, we'll go to our HTML, come down to this last image, and yeah, it has a class of logo on it. So we're gonna point to the logo class and then inside that rule, once again we're gonna float it to the left and that will be the default view that we'll see in other browser that don't support this. And then we're gonna use the shape outside property again. This time we're gonna do it a little bit different, we're gonna use the URL property here to point to the image that we wanted to float around and we're gonna be using the exact same shape or the exact same image, I should say. It's gonna use the shape of this image of the transparent pixels within this image to wrap that text around. So I'm gonna copy that and then we'll jump into our CSS. And then inside the URL attribute, I'm gonna put some quotes there. And then inside these quotes I'm gonna paste that value. And there we go, we see it works just fine. So our text is now wrapping around the shape inside that transparent PNG object. So those are just a few options. There are other options for that shape outside value but that at least gives you a god starting point. So thank you for watching and I'll see you in the next lesson.

Back to the top