Masks
Transparent gradient images to overlay on images for a beautiful design.
The goal of any content strategy should be extensibility. In order to achieve rich designs, you need images that are crafted for each medium and use case. You probably don't want to spend time having to create different variations of each image though. To assist with that, we've designed a powerful masking system that can be used with images and cards, reducing the number of custom images needed in your mobile applications.
These image masks can be referenced directly within the Source of an Image, or you can apply them automatically inside the card components. For Block Card and Contained Card, the mask is placed on the image, while the mask for Inline Card is placed over the entire card. This makes sense as the image on an Inline card takes up the full background.
| Use | Description | Property Name (Block and Contained) | Property Name (Inline) |
|---|---|---|---|
Mask | This is the location of the mask image. You can either provided your own via a URL or take advantage of the masks that our built into the application (recommended) | ImageMask | CardMask |
Opacity | The opacity of the mask. | ImageMaskOpactity | CardMaskOpacity |
Color | The color to overlay the mask. | ImageMaskColor | CardMaskColor |
Built-In Masks
While you can provide your own masks via a URL, you can save load time and bandwidth by using one of the built-in masks. These are highlighted below.
When applying masks to cards, you can also append -Flip to the end of the mask name to flip the mask 180 degrees. For example, if you wanted a light fade flipped use Fade-Light-Flip.
Designing With Masks
As you set out to design with masks, keep in mind that the best designs will be a recipe that incorporates the properties of the card, image, and mask. Take for example the design below. The effect of the card comes from the card's background, the effects on the image as well as the mask.
Last updated
