- CSS Shapes is one of my
favourite little things that you can use to do great
graphic design on the web. It's one of my favourites
because CSS is very simple, the effect is very
dramatic, and the fallback for browsers that don't
have support is very easy to deal with, it's kind
of like a no big deal. It's funny, though, I don't
see nearly as many people using it as I would like to see. I have a feeling that a lot
of designers just don't know that it is out there. So let me show you how this works. Here I have a example. This is a website that
I built three years ago and used CSS shapes. Very simple code here. I've got an h1 with the name Jeremy Keith. An image of Jeremy Keith. And a paragraph about Jeremy Keith. This is kind of real screen shots from the site as I was building it about when it was like halfway built. If I float that image to the left, because of it's flow
content, the image is first and then the text follows. When I float that image to the left, the text sort of jumps up to be even with the top of the photo, and then it flows around the photo. That's how floats work and
how they continue to work, how we want to keep using them, it's also how flow content works. So we're familiar with this. You can kind of get the
text to go around the photo, that's interesting, that's cool. We should do that more,
actually, than we do. I also put a little bit of a margin on it on the right and on the
bottom to create some space between the image and
the tags, looks great. If I add one line of code,
shape-outside: circle, then rather than the flow
content going in a box around the box that the image lives in, because in CSS, there's always a box for everything on the web. Everything, under the hood, if you crack open the
hood of the web browser, everything's a box. But what we can do is
we can tell the browser to run that flow content in
a circle and not in a box. And you get this kind of
beautiful, simple effect. It has a elegance to it,
or it has a polish to it that we don't see necessarily
very often on the web. We do see this very much
in layouts, for instance, inside magazines where
some time and attention has been put into making a good layout. Here is the finished website. This is what it looks like
on the finished website. You can see basically every
instance of a photo of a human is in a circle and the bio is nearby, and the bio wraps around that
circle in a circle shape. And then not every browser has support. So this is what it looks like in a browser that does not have support. The flow content just goes in a square. It goes on the outside of
the box that is the image, so it's not like that's ever gonna accidentally overlap anything. We basically get the effect that we get if we were not using shape-outside. There are a couple options
with shape-outside. You can use shape-outside:
circle, ellipse, border-box, inset, url. There's also a shape-margin of 30 pixels, which can help, especially if you're using something like shape-outside: border-box, or shape-outside inset, in which case you're kind of telling
the browser to follow the edge of the box, maybe
you want to adjust it. Here's an example showing
shape-outside: circle, again going around this photo of a tomato that happens to be a round fruit. This is an example of
shape-outside: ellipse, where instead of it
being a perfect circle, it's an oval, and 50/50 means
I want you to make it even, an even ellipse with the
centre point of the ellipse in the 50% 50%. But you could use
different percents and make and egg, or make like a lopsided egg. Here I'm using a polygon,
with quite a few points. That will then draw a
shape around the grapes. Not exactly on the edge of the grapes, because it doesn't need to be exact, but a kind of a complicated
polygon around the grapes so that the text flows really beautifully around those grapes. Now you might ask, how
in the world am I ever gonna get this math for the polygon? You know, do I need to go into
a programme like Illustrator? No, what you're gonna
want to do is use a tool in a developer inspector
and get at those numbers. Just manipulate the shape
directly in the browser, grab the numbers out of the dev tools and past it into your code. So here is a Dev Tools that was made by the folks at Adobe
quite a few years ago. It's a Chrome extension that I think you can still get today, although I know it's maybe, it seems to be getting an increasing number of bugs. Adobe is not able to continue
to work on this anymore, so I'm not sure how well
this works at the moment. But we are making this kind
of tool for Firefox right now. In fact, as I record this
video, I think it's almost done and I'm hoping to actually
get my hands on it soon, and be able to show the
Firefox version to you. But in any case, this tool
in this Chrome extension, shows you the idea of CSS Shapes. It shows you the idea of having a polygon and how by adjusting the polygon points you can adjust how the flow content is wrapping around that image. Really powerful. This is what CSS Shapes does for us. It really works in many
ways like a programme like Page Maker, QuarkXPress, InDesign and letting the page layout have the text wrap-arounds and kind of an image. Here's another example. This one was also put together
by the folks at Adobe, where you can see that
rather than having a polygon or some other sort of shape
that has to be created manually, the flow is being controlled by a mask. There's an image that is
the image of this beehive, and then there's a mask image. And the mask is telling the
browser where to put words and where to not put words. This is probably a much
more appropriate solution to a situation like a
content management system where you could have a bunch of robots create the masks for you automatically, based on the content images. And you wouldn't need somebody to kind of bespoke handcraft each shape. I'll dig in. You can see that the beehive
with the illustration of the bees is actually a content image. It's in the html itself, where the mask, it says shape-outside: url and it's pointing to a
different image, it's a png. You can see it here, where
it's just black and white. Now these images have
to be Cors compatible, which has to do with the security thing. There are times, I know,
people try to do this, especially just on your local computer, and there's something about the image and the way the image is saved
that's not Cors compatible and so it doesn't work, the
mask just doesn't appear. If you're struggling with that, then go look up Cors, capital c-o-r-s. And kind of find out
about Cors compatibility. It has to do with making sure that once a website is launched, that somebody can't kind
of attack the server by changing the image and doing something with redirecting what
image is getting used on that particular mask for
that particular CSS shape. Kind of goes above my head
because I'm not really that deep into servers or into security, but it has to be Cors
compatible, unfortunately, and that makes it kind of hard to use. But once you've kind of
wrangled with the server side stuff and figured out
what you need to be doing, the CSS parts are really quite simple. Here's a design that I
really like from a magazine where the text is in this polygon shape, and there's a graphic
match between the staircase and the text, and it just
makes for a very beautiful, very polished kind of presentation. We could do something like
this with CSS shape-outside by creating triangles in that white space and letting the content flow in between and maybe if it overflowed
then it could just start flowing into a
typical normal column. All kinds of possibilities
are true with CSS Shapes. You don't just have to go around an image, you don't just have to go around something that's on the page. You can also delineate white space and shape the content in the
way that your text is flowing. So check out CSS shapes. Mess around with it, try it. Maybe if there's someone on your team that you think could learn from it, maybe you're a developer and you want to inspire your designers, perhaps makes some examples
based on the content that's on your websites, like
a few prototypes or something. Just show them to be
able to get the word out that this is a possibility and something that we
really could be using to make our websites more
beautiful and more professional.
