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.

These masks give you several different options to start from. Using image transformations like Fill Color Flip, and Tint will provide additional customize to achieve your desired look. Learn more about Layering Images to design beautiful cards and graphics in your apps!

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.

Fade-Thin

resource://Rock.Mobile.Resources.Masks.fade-thin.png

Fade-Light

resource://Rock.Mobile.Resources.Masks.fade-light.png

Fade-Medium

resource://Rock.Mobile.Resources.Masks.fade-medium.png

Fade-Dark

resource://Rock.Mobile.Resources.Masks.fade-dark.png

Midline

resource://Rock.Mobile.Resources.Masks.midline.png

Vignette

resource://Rock.Mobile.Resources.Masks.vignette.png

Top-Bottom

resource://Rock.Mobile.Resources.Masks.top-bottom.png

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.

<Rock:InlineCard CardRatio="4:3"
    Title="Enjoy the Views"
    HeaderLocation="Center"
    ContentLocation="Bottom"
    Tagline="DESTINATIONS"
    Image="https://yourserver.com/image-grandtetonfence.jpg"
    ImageSaturation="0"
    ImageOpacity=".4"
    BackgroundColor="#6bac43"
    BackgroundMask="Midline"
    BackgroundMaskColor="#6bac43"
    BackgroundMaskOpacity=".6">
    Bring to the table win-win survival strategies... 
</Rock:InlineCard>