Adobe

decor

Web Platform Team Blog

Making the web awesome

Make responsive masks for CSS Shapes using Mac Preview App

Chrome, Opera, and Safari have already shipped CSS Shapes, and we’ve made a CSS Shapes polyfill available for browsers that don’t have the feature yet. For regular shapes and arbitrary polygons, there’s support in Brackets and Chrome’s web inspector.

Now that there’s support, how about creating CSS Shapes with images? Rebecca Hauck wrote an article about how to create image shapes with Photoshop. Today, I want to show you an awesome way to create masks using the Mac Preview application. Preview has some neat photo editing capabilities, which we can use for creating image-masks with an alpha channel. We then, use these image masks to create breathtaking responsive designs for the web for our shapes images. Notice how the text wraps around the tree, conforming in a cozy way to its shape:

See the Pen Responsive image mask with responsive content by Adobe Web Platform (@adobe) on CodePen.

How is it made?

First, let’s pick an image. I took the following photo recently in the wilderness of the Yukon.

Yukon landscape

Yukon landscape, September 2014 @ZoltanWebKit

My plan is to make this image as wide as the actual page size, and place the text content on the image. The text will appear on the white clouds and wrap around the trees. The image and the font-size will scale as I resize my browser window. In order to achieve this behavior, I’m going to make an image-mask. Using an image mask causes the content to wrap around the shape I’ve created. This means I don’t need to add any alpha to the original image. The mask scales as the image scales, so the whole experience is going to be smooth and visually appealing.

yukon-mask

How to mask an image using Preview?

I recorded my screen while making the mask in Preview. Take a look at it first, then I’ll explain the steps below the animation.

Making image mask with Preview

Making an image mask with Preview

  1. In Preview, select the Edit button (edit). This opens the editing toolbar.
  2. With the Instant Alpha button (preview_alpha_mul), select where the content should go:
    • Click on the clouds and keep the mouse button pressed. Now, slowly start moving the mouse. As you move the mouse, the smart selection will spread out.
    • When you’ve highlighted the area that you want the text to wrap around, release the mouse button.
  3. Hit the delete button on your keyboard to remove the selected area.
  4. Reselect the transparent (gray) part and then invert the selection by hitting Shift+Command+I.
  5. Get rid of mask colors. (Doing so reduces the mask file’s size.)
    • Hit the Adjust Color button (preview_adj_color_prism_mul).
    • On the Adjust Color window, move the left level adjustment bar to the very right. This moves all the shadows onto the highlights and removes the lights and colors from the picture.
    • Preview sometimes leaves some pixels lightened, so move the Contrast bar to the left to make sure that we removed all the highlights.
  6. Save the image. We are going to use it as a value for the shape-outside CSS property.
  7. How to connect the shape mask with the image and the content?

    We need to add our original image as an <img> tag following by some content. CSS Shapes works on floating objects, so after making the image a floating object (line #3) and setting the size of it (line #4), we need to define the shape-outside property. For shape-outside, we use our shape-image mask (line #5). To make the text size responsive, I recommend using viewport units as I did in this code snippet (line #7) and also in the codepen.io demo.

    The original demo contains a little bit more code and includes the CSS Shapes polyfill when the browser doesn’t support CSS Shapes. You can view the code in detail on codepen.io.

    Send me your feedback in the comments or on Twitter @AdobeWeb or @ZoltanWebKit!

Comments are closed.