CSS Masks

CSS masks currently only work with webkit browsers (Chrome and Safari).

A mask is used to hide portions of an element. A mask can be made using either an image, a gradient or text. When a mask is applied to an element, both the contents and background of the element are masked. A mask may be applied to the entire element or it may exclude either the border or both the border and the padding.

Image Mask

An image can be used as a mask. Non-transparent pixels in the image will act as the visible part of the mask. Transparent pixels in the image will act as a mask, blocking that part of the element from being displayed.

The colour of the non-tranparent pixels does not matter, as the mask is based solely on the alpha values of the pixels. The mask below is used in the following example.

shamrock

Example of an image mask (Run Example)

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
#mask
{
   -webkit-mask-box-image: url(images/transparent_image.gif);
   -moz-mask-box-image: url(images/transparent_image.gif);
   -ms-mask-box-image: url(images/transparent_image.gif);
   -o-mask-box-image: url(images/transparent_image.gif);
   mask-box-image: url(images/transparent_image.gif);            
}
</style>
</head>

<body>

<img id = "mask" src = "images/dkit02.gif">

</body>
</html>

Faded Image mask

Adjusting the alpha value of various pixel in an image will produce a mask that fades the display of the element using the mask.

The faded image below is used in the following example.

faded image

Example of a faded image mask (Run Example)

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
#mask
{
   -webkit-mask-box-image: url(images/faded_image.png);
   -moz-mask-box-image: url(images/faded_image.png);
   -ms-mask-box-image: url(images/faded_image.png);
   -o-mask-box-image: url(images/faded_image.png);
   mask-box-image: url(images/faded_image.png);            
}
</style>
</head>

<body>

<img id = "mask" src = "images/dkit02.gif">

</body>
</html>

Masks can be combined with other CSS styles. Create your own faded image mask in photoshop and use it to display an image on a background that has a circular gradient, as shown here.

Using the logo of a company as a mask, draw an image, as shown here.

Gradient Mask

A gradient mask is created by fading a gradient from black to transparent, where Black means fully visible.

Example of a gradient mask (Run Example)

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
#mask
{
  -webkit-mask-box-image:-webkit-linear-gradient(black, transparent);    
-moz-mask-box-image:-webkit-linear-gradient(black, transparent);
-ms-mask-box-image:-webkit-linear-gradient(black, transparent);
-o-mask-box-image:-webkit-linear-gradient(black, transparent);
mask-box-image:-webkit-linear-gradient(black, transparent);
} </style> </head> <body> <img id = "mask" src = "images/dkit02.gif"> </body> </html>

Masking Text

Text can be masked in exactly the same way as an image can be faded.

Example of text being masked (Run Example)

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
#mask
{
  background-color:yellow;
  color:red;
  font-size:300px;
  -webkit-mask-box-image:-webkit-linear-gradient(left, transparent 0%, black 50%, transparent 100%); 
  -moz-mask-box-image:-webkit-linear-gradient(left, transparent 0%, black 50%, transparent 100%); 
  -ms-mask-box-image:-webkit-linear-gradient(left, transparent 0%, black 50%, transparent 100%); 
  -o-mask-box-image:-webkit-linear-gradient(left, transparent 0%, black 50%, transparent 100%); 
  mask-box-image:-webkit-linear-gradient(left, transparent 0%, black 50%, transparent 100%);           
}
</style>
</head>

<body>

<p><span id = "mask">DkIT</span></p>

</body>
</html>

More than one mask can be combined to create visually interesting results. Write code that uses two masks to display the multicolour text shown here. Hint: You will need two masks: one for each of the two triangles.

Precise Gradient Mask Control

By using rgba instead of "black" as the gradient colour, we can exert more control over a mask's visibility. An rgba alpha value of 1 is fully visible and an rgba value of 0 is fully masked. any value between 0 and 1 will exert a degree of masking. Note, that the red, green and blue values given in the rgba are ignored for the purpose of masking.

Example of rgba gradient mask (Run Example)

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
#mask
{
  background-color:yellow;
  color:red;
  font-size:300px;
  -webkit-mask-box-image:-webkit-linear-gradient(left, transparent 0%, rgba(1, 1, 1, 0.5) 50%, transparent 100%); 
  -moz-mask-box-image:-webkit-linear-gradient(left, transparent 0%, rgba(1, 1, 1, 0.5) 50%, transparent 100%); 
  -ms-mask-box-image:-webkit-linear-gradient(left, transparent 0%, rgba(1, 1, 1, 0.5) 50%, transparent 100%); 
  -o-mask-box-image:-webkit-linear-gradient(left, transparent 0%, rgba(1, 1, 1, 0.5) 50%, transparent 100%); 
  mask-box-image:-webkit-linear-gradient(left, transparent 0%, rgba(1, 1, 1, 0.5) 50%, transparent 100%);           
}
</style>
</head>

<body>

<p><span id = "mask">DkIT</span></p>

</body>
</html>

Using Text to Mask an Image

Text can be used to mask an image, as shown in the example below. This is done by placing the image onto the background and clipping the element's displayable area against the text.

 

Example of text mask for an image (Run Example)

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
#mask
{
   font-size:300px;
   color: transparent;
   background: url(images/dkit02.gif);
   
   -webkit-background-clip: text;
   -moz-background-clip: text;
   -ms-background-clip: text;
   -o-background-clip: text;
   background-clip: text;
}
</style>
</head>

<body>

<p><span id = "mask">DkIT</span></p>

</body>
</html>

Write code to place a drop shadow on a text mask, as shown here.

 
<div align="center"><a href="../../versionC/index.html" title="DKIT Lecture notes homepage for Derek O&#39; Reilly, Dundalk Institute of Technology (DKIT), Dundalk, County Louth, Ireland. Copyright Derek O&#39; Reilly, DKIT." target="_parent" style='font-size:0;color:white;background-color:white'>&nbsp;</a></div>