Make your WordPress designs pop with CSS shapes and masks
Published: April 21, 2022By Sebastian
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.
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.
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.
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.
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.
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.
Make your WordPress designs pop with CSS shapes and masks
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.
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.
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.
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