Adobe

decor

Web Platform Team Blog

Making the web awesome

Add Shape and Depth to Your Layout with Photoshop and CSS Shapes

In the current Webkit implementation of the CSS Shapes specification, we’ve added support for shape-outside  using an image as a value. In this case, rather than defining the shape with a basic-shape function, the shape is computed from the image’s alpha channel, with the opacity threshold being configurable with shape-image-threshold. By using an image with a transparent background, you can use CSS Shapes to flow text around the arbitrary shape defined by your image.

The default behavior is to define the shape as the area(s) of the image greater than 0% opacity so even semi-transparent areas, such as drop shadows, will be part of the shape. In this article, I’ll walk you through creating an image and defining a drop shadow in its alpha channel using Photoshop and then how to use it with CSS Shapes to create depth & contour to this simple encyclopedia layout.

 gears-first-page

 Defining a Shape in the Alpha Channel with Photoshop

We’ll start by opening this simple image in Photoshop.

1. Create a new layer and name it ‘shadow’. We’ll be creating the drop shadow on this layer, so move it beneath the main image.

Create a New Layer

2. Fill the layer with black and set the fill opacity to 50%

Set Layer Fill & Opacity

3. With the shadow layer selected in the Layers panel, select the image with the Quick Selection tool. Click the Refine Edge button and set the Feather to 5px.

Soften the edges of the selection

4. Create a new Layer Mask. With the Move tool, adjust the shadow layer down and to the right.

Switch to the Channels panel and see the new alpha channel that has been created from the layer mask. This will be the shape around which text will flow when used with CSS Shapes.

Alpha Channel

Save the image as a PNG.

Wrapping Text Around Images with CSS Shapes

First, we’ll take our original page layout and modify to wrap around the unshadowed image.


#gears
{
    float: left;
    shape-outside: url("gears.png");
}
 ...

Since the original image had a transparent background, the shape is defined as the outline of the gears. Using shape-outside, we see the text wrap around the gears like this:

Using shape-margin, you can specify how close you want the text to wrap next to your image.

By default, the shape-margin is none, which in this case, wraps the text a little too close to the gears. We can adjust this accordingly:


#gears
{
    float: left;
    shape-outside: url("gears.png");
    shape-margin: 10px;
}

Much better:

But rather than setting a shape-margin: 10px;, I’d like to use the drop shadowed image we create above and allow the shadow in the alpha channel to define the contour of the shape.


#gears
{
    float: left;
    shape-outside: url("gears-dropshadow.png");
}
...

Resulting in this:

That’s it. In just a few simple steps, we added depth and richness to an otherwise flat and boxy layout using this cool new CSS feature.

If you’re curious about how exactly we calculate the shape from images, read about the algorithm for determining the first fit location for an image shape in Hans Muller’s blog.


 
 
The text in this example was excerpted from Wikipedia:
Gear. (2014, March 9). In Wikipedia, The Free Encyclopedia. Retrieved 20:41, March 10, 2014, from http://en.wikipedia.org/w/index.php?title=Gear&oldid=598819607

Comments are closed.