Getting creative with form-outside CSS tricks

The last time I asked: “Why do so many long-shaped articles feel visually flat?” I explained that:

“Images in long -term content can (and often have to) do more than illustrate. They can shape how people navigate, deal with and interpret what they read. They help determine the pace, influence how readers feel and adding character those words can only convey.”

Then I touched the expressive possibilities of CSS forms and how, by using shape-outsideYou can wrap text to wrap the Alpha channel of an image to add energy to a design and make it feel alive.

There are so many creative opportunities to use shape-outside That I am surprised that I rarely see it that it is used that way. So how can you use it to add personality to a design? Here is how I do it.

My letter: Patty Meltt is an emerging sensation of country music and she needed a website to launch her new album and tour. She wanted it to be distinctive and memorable, so she called Things and nonsense. Patty is not real, but the challenges of designing and developing sites such as those of her.

Most shape-outside Guides start with circles and polygons. That is useful, but it only answers the How. Designers have the Why – Otherwise it is just another CSS character.

Whatever form the subject takes, each image is in a box. Text flows above or below that box as standard. If I drive an image left or right, the text wraps itself around the rectangle, regardless of what is in it. That is the limitation shape-outside Overcomes.

shape-outside This allows you to get free from those boxes by switching on layouts that can respond to the contours of an image. That shift from images in courses to having the image content determine the composition is what it uses shape-outside So interesting.

Solid blocks of text around the straight edges can feel static. But text that bends around a guitar or bends around a portrait creates movement, which can make a story more attractive and fascinating.

CSS shape-outside This allows text to flow around any customized shape, including the Alpha channel of an image (ie the transparent areas):

img {
  float: left;
  width: 300px;
  shape-outside: url("https://css-tricks.com/getting-creative-with-shape-outside/patty.webp");
  shape-image-threshold: .5;
  shape-margin: 1rem;
}

First a quick summary.

To make text flow around elements, they have to do that float left or right and have their width defined. The shape-outside URL selects an image with an alpha canal, such as a PNG or Webp. The shape-image-threshold Property sets the Alpha channel threshold for creating a form. Finally there is the shape-margin Ownership that – believe it or not – creates a margin around the shape.

Interactive examples from this article are Available in my lab.

Multiple imaging

If I add images to a long -term article, I ask myself: “How can they help shape someone’s experience?” Flowing text around images can delay people a little, making their experience compelling. Visually, the text and image brings in a closer relationship, making them feel part of a shared composition instead of isolated elements.

The life story of Patty-van Sing in Honky-Tonks to Headlining Stadiums-Vaat two sections: One about her, the other about her music. I have added a long vertical image of Patty to her biography and two smaller album covers to the music column:

  

    
    [...]
  

  

    
    [...]
    
    [...]
  

A simple grid then makes the two columns:

#patty {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 5rem;
}

I like to make my designs as flexible as I can, so instead of specifying image widths and margins in static pixels, I have opted for percentages on those column widths, so that their actual size compared to the size of the container is:

#patty > *:nth-child(1) img {
  float: left;
  width: 50%;
  shape-outside: url("https://css-tricks.com/getting-creative-with-shape-outside/patty.webp");
  shape-margin: 2%;
}

#patty > *:nth-child(2) img:nth-of-type(1) {
  float: left;
  width: 45%;
  shape-outside: url("https://css-tricks.com/getting-creative-with-shape-outside/album-1.webp");
  shape-margin: 2%;
}

#patty > *:nth-child(2) img:nth-of-type(2) {
  float: right;
  width: 45%;
  shape-outside: url("https://css-tricks.com/getting-creative-with-shape-outside/album-2.webp");
  shape-margin: 2%;
}

Text now flows around the high image of Patty without cutting paths or polygons – only the natural silhouette of her image that forms the text.

When an image is turned using a CSS transformIdeally, browsers would be the text around his rotated Alfakanaal Refllow. Unfortunately they don’t do that, so it is often necessary to build that rotation in the image.

shape-outside With a faux-centered image

To allow text to flow around elements, they must be driven to the left or right. Placing an image in the middle of the text would make Patty’s biography design more striking. But there is none center Value for Drijvers, so how can this be possible?

The Bio capacity of Patty is spread over two symmetrical columns:

#dolly {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

To create the illusion of text that flows around both sides of its image, I first split it into two parts: one for the left and the other for the right, both half or 50%of the original width.

Then I placed one image in the left column, the other right:

  

    
    [...]
  
  
  

    
    [...]
  

To give the illusion that text flows around both sides of a single image, I drove half of the left column to the right:

#dolly > *:nth-child(1) img {
  float: right;
  width: 40%;
  shape-outside: url("https://css-tricks.com/getting-creative-with-shape-outside/patty-left.webp");
  shape-margin: 2%;
}

… and half of the right column on the left, so that both halves of Patty’s image combine in the middle:

#dolly > *:nth-child(2) img {
  float: left;
  width: 40%;
  shape-outside: url("https://css-tricks.com/getting-creative-with-shape-outside/patty-right.webp");
  shape-margin: 2%;
}

Faux background image

Until now, my designs for Patty’s biography have recorded a cut portrait with a clearly defined alpha canal. But I often have to make a design that feels looser and more natural.

Usually I would post a photo like one background-imageBut for this design I wanted the contents to flow loosely around Patty and her guitar.

So I inserted Patty’s photo as an inline image, drove over it and set his width at 100%;

  
  [...]

#kenny > img {
  float: left;
  width: 100%;
  max-width: 100%;
}

There are two methods that I could use to flow text around Patty and her guitar. First I could edit the image, where non-essential parts are removed to make a soft-guideline alpha canal. Then I could shape-image-threshold Feature to determine which parts of the Alpha -channel are the contours for text packaging:

#kenny > img {
  shape-outside: url("https://css-tricks.com/getting-creative-with-shape-outside/patty.webp");
  shape-image-threshold: 2;
}

However, this method is destructive, because much of the texture behind Patty is removed. Instead, I made a polygon clip-path and applied that as the shape-outsideWhich text flows around while retaining all the details of my original image:

#kenny > img {
  float: left;
  width: 100%;
  max-width: 100%;
  shape-outside: polygon(…);
  shape-margin: 20px;
}

I have little time for writing polygon path points by hand, so I trust Bennett Feely’s CSS clip-path maker. I add my image -url, draw a custom polygon shape and copy the clip-path Values ​​for my shape-outside property.

Text between

Patty Meltt likes to require the limits of country music, and I wanted to do the same with my design of her biography. I intended to flow text between two photo montages, where elements overlap and spill parts of the images from their containers to create depth.

So I made two mounts with irregularly shaped alpha channels.

I have placed both images above the content:

  
  
  […]

… and used the same image -Url’s for values ​​for shape-outside:

#johnny img:nth-of-type(1) {
  float: left;
  width: 45%;
  shape-outside: url("https://css-tricks.com/getting-creative-with-shape-outside/patty-1.webp");
  shape-margin: 2%;
}

#johnny img:nth-of-type(2) {
  float: right;
  width: 35%;
  shape-outside: url("img/patty-2.webp");
  shape-margin: 2%;
}

Content now flows like a river in a country number, between the two image mounts, which fill the design with energy and movement.

Conclusion

Too often images in long -term content are in boxes and isolated, as if they have fallen as a side issue in the page. CSS forms – and especially shape-outside – Give us the opportunity to treat images and text as part of the same composition.

This is important because design is not only about making things usable; It is about giving shape how people feel. Text around the curve of a guitar or the edge of a portrait of wrapping the readers, invites them to linger and makes their experience compelling. It brings rhythm and personality to layouts that otherwise may feel flat.

So, the next time you reach a rectangle, pause and think about how shape-outside Can help to convert a normal page into something memorable.