Search within TutorialsPark

CSS3 Masks


CSS3 Masks is used to create a masking effect over an image.


CSS3 Masks : Concepts and Usage

angry-birds

1. CSS3 masks are used to create an overlay over an image, which clips portions of an image or displays parts of underlying image as transparent or translucent

2. A mask can be an image or a gradient with an alpha channel. Alpha values of an element is always between 0(completely transparent) and 1(completely opaque).

3. When a mask is applied to an image, portions where the alpha value of the mask is 0(opaque), the underlying image is completely transparent, portions where the alpha value of the masks is 1(transparent), the underlying image is completely opaque.

4. For values between 0 and 1, the transparency effects are applied proportionally.The masks are applicable to all descendents of the element as well, in case of multiple masks, the final effect is sum totat of all the individual effects of the masks.

The Mask with gray Scale


Note: The color of the mask does not matter, what matters is only the alpha value of the mask

Using CSS3 masks on your Webpage

1.The first step to create a mask is an image (only .png and .svg format) with an alpha channel to be used as a mask

2. The url of this mask image is passed as a value for the CSS3 property -webkit-mask-image or -webkit-mask-box-image .

Here, the -webkit-mask-image property applies the mask of native size on the underlying element.

-webkit-mask-box-image applies the mask scaled down to the size of the image. Its upto the user to select the most suitable one.

CSS Example : The mask property

Give it a TRY! » Note: The mask property is supported only on webkit (chrome and safari) browsers


CSS3 Mask to Clip Shapes

angry-birds

A good application of mask property is to cut shapes of different sizes of your Image, using a mask.

CSS Example : The clipping effect using the mask property

Give it a TRY! » Note: The mask property is supported only on webkit (chrome and safari) browsers


CSS3 Masks: Stacking Masks one above the another

1. When you stack one mask over another, the overall effect is a concatenation of all the individual masks.

Example: CSS Masks stacking effect

Give it a TRY! » Note: The mask effects are applied to all elements and its descendants


CSS3 Masks: How to use a gradient as Mask

1.You can even use gradients instead of images as a mask for underlying elements to create great effects.

Example: CSS Masks using gradients

Give it a TRY! »


CSS3 Gradients Mask on Text Contents

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi laoreet rutrum porta. In nisi turpis, porttitor sollicitudin libero nec, elementum tempus ante. Donec eget pellentesque felis . Ut tincidunt, eros sed scelerisque tincidunt, erat nisi consectetur mauris, sed consequat nunc augue nec tellus. Nam viverra dictum quam, nec feugiat mauris semper id. Nunc vel feugiat orci. Ut vitae tellus cursus, tempor justo vel, ornare ipsum. Proin enim mauris, iaculis posuere mollis nec, molestie in enim. Nunc dapibus neque quis quam volutpat malesuada

1. Gradients can be used a mask for applied to text to create great effects

Example: CSS3 gradients mask on texts

Give it a TRY! »


Clipping Images using CSS3 clip property

Use the CSS3 property clip to create a mask through which a section of an image can be seen

Example: CSS3 clip Property

Give it a TRY! »