Make your WordPress designs pop with CSS shapes and masks

Make your WordPress designs pop with CSS masks and shapes

We’ve added support for CSS masks and shapes in Microthemer version¬†7.1.2.4. These effects can make your designs look more friendly and modern. And distinguish your sites from the standard rectangles, or uniform roundness of border-radius. Think sharp diagonal contours, smooth wavy curves, and organically shaped images. You can create these stylish effects in a few clicks with Microthemer.

To get a feel for what’s possible, watch the CSS shapes and SVG masks video tutorial or browse the following screenshots.

1. Angular header using clip-path

An angular header can be created using a pre-made clip-path shape we’ve named “bottom center point“. Microthemer provides a number of pre-made shapes in the clip-path menu (including Clippy shapes), which become editable polygon points in the input field. The slider or mouse wheel can then be used to tweak the point values. In the following screenshot, the angular shape has been set to animate using a transition, which is triggered when the header element comes into view.

Angular header using clip-path polygon

2. Organic image cut-outs using mask-image

Convert square images to more friendly organic looking shapes by applying a stock SVG image-mask. There are several pebble shapes to choose from.

Organic SVG image mask shapes

3. Multiple masks on a single image

We can apply multiple image masks to a single image to reveal different portions of the image. Use commas to separate values for mask-image, mask-position, and mask-size etc.

Multiple CSS image masks on a single image

4. CSS gradient fade mask

We can define a regular CSS gradient in the mask-image field. Microthemer provides some examples to get you started in the mask-image menu.

5. Align text around a floated shape

Text can be aligned around an element that is floated to the left or right. The image must precede the text, and it must have the float property set. The shape-outside property then determines how the text will flow.

6. Wavy shape dividers using pseudo elements

Microthemer includes a handful of shape dividers which you can add to sections of variable height using ::before or ::after pseudo elements.

7. Shape dividers on an image using a gradient

You may also want to add a shape divider to an image, but we can’t use ::before or ::after on HTML elements that do not support child elements (e.g. an img or video). So as a workaround, the waves mask-image can be used in conjunction with a CSS gradient mask.

Add these CSS masks to your own WordPress site

  1. Watch the CSS shapes and SVG masks video tutorial
  2. Play around with the accompanying live demo
  3. Purchase Microthemer, risk free (30 day money back guarantee)
  • Keep in touch…

    Don't miss out on tutorials, special offers, and discounts we share with our subscribers!

  • Follow us on:

  • Refer friends for benefits

    We know that lots of you have been happily recommending Microthemer to your friends. This really helps us out. And to say thanks, we'd like to start giving you some commission for sending customers our way. Find out more.

Close