Modernise your WordPress designs with angular sections, wavy shape dividers, and organic curves using Microthemer’s responsive Clippy shapes and SVG image masks.
0:22
Summary of effects demonstrated
0:46
Organic pebble shapes
0:57
Apply multiple mask images
1:09
Fade an image using a CSS gradient
1:22
Align text around a shape
1:32
Overlap text at an image opacity threshold
2:14
Apply shape dividers to an image
2:49
See live demo link to follow along
2:55
Angular section
3:17
Set trianglify background image
4:12
Cut out section angles using a clip-path polygon function
5:15
Stock clip-path shapes taken from Clippy website
5:46
Adjust polygon points using the slider, mousewheel or keyboard arrows
6:21
Animate clip-path shape polygon points using transition
7:33
Organic pebble shapes
7:45
Set mask-repeat to "no-repeat" and mask-size to "contain" or "cover"
9:10
Choose a pebble mask to create a more organic shape
9:20
Using the slider for e.g. mask-position flickers in Chrome (use Firefox)
10:12
Apply multiple mask images
10:18
Apply the dolphin image mask to a single photo 3 times
10:39
Set 3 comma separated mask-size values
11:02
Set 3 comma separated mask-position values (in percentages)
12:17
Fade an image using a CSS gradient
12:22
Apply a radial fading out gradient
12:36
Fine tune the gradient color stop positions
13:14
Align text around a shape
13:42
Float the image that precedes the text to the left
14:26
Generate a circle shape using the clip-path property options
14:52
Copy the circle function to the shape-outside property
15:17
Use shape-margin to create space (but there is a caveat)
15:49
The regular margin property can work well with basic shapes
17:56
The transform property can be used to create space too
18:16
Overlap text at an image opacity threshold
18:36
Float the image that precedes the text to the right
18:52
Set the HTML image URL on the shape-outside property
19:08
This only works if the source HTML image has transparency
19:34
Adjust the shape-image-threshold value to overlap the text
19:56
Wavy shape dividers
19:58
Set the background-color of a section
20:08
Set the wave on ::before / ::after instead of the section
20:55
A pseudo element is created with CSS, rather than HTML
21:12
Create a ::before pseudo element in Microthemer
22:47
Set the background-color to "inherit" the section color
23:13
Set mask-repeat to "no-repeat" and the mask-size to "cover"
23:37
Use an ::after pseudo element for the double-wave effect
24:11
Create an ::after pseudo element by duplicating ::before
24:40
Set the ::after element mask-image to "waves-top-opacity"
24:44
Adjust the mask-position on the ::after element
26:21
Apply shape dividers to an image
26:32
Apply the "waves-multiple" mask-image
26:52
Pseudo elements can't be applied to an image (img) element
27:23
Set the mask-size height to "20%"
27:51
Define a CSS gradient mask as well as the waves
28:10
Set the gradient size to "100%" width and height
28:20
Set the gradient color stop positions to meet the "20%" mask-image
Apply CSS shapes and SVG masks
Modernise your WordPress designs with angular sections, wavy shape dividers, and organic curves using Microthemer’s responsive Clippy shapes and SVG image masks.
Follow along with what’s shown in the video using the live demo.
Get Microthemer