CSS Tutorial

This CSS tutorial is designed for beginners to navigate through the essentials and intricate aspects of CSS styling. Upon finishing this tutorial, participants will possess a comprehensive understanding of CSS, setting a solid foundation for further exploration and mastery. This guide aims to equip you with the skills necessary to transform your visions into visually appealing web designs, laying the groundwork for your journey towards becoming an accomplished web designer.

Masking - mask
CSS mask is a shorthand property that masks and displays an image at a particular position to partially or completely hide an element.
This property is a shorthand for the following CSS properties:
﻿mask-clip﻿
﻿mask-composite﻿
﻿mask-image﻿
﻿mask-mode﻿
﻿mask-origin﻿
﻿mask-position﻿
﻿mask-repeat﻿
﻿mask-size﻿
Possible Values
none − This value removes the masking effect.
<mask-reference> − Sets the image source for the mask. Refer mask-image.
<masking-mode> − Determines whether an alpha or luminance mask should be applied to the mask reference specified by mask-image. Refer mask-mode.
<position> − Determines the initial position for each defined mask image relative to the mask position layer set by mask-origin. Refer mask-position.
<bg-size> − Defines the size of the mask image. Refer mask-size.
<repeat-style> − Determines how the mask image are repeated. Refer mask-repeat.
<geometry-box> − A single <geometry-box> value sets both mask-origin and mask-clip. If two values are present, the first sets the mask-origin and second mask-clip.
<geometry-box> | no-clip − Determines the area affected by the mask-image.
<compositing-operator> − This value specifies the compositing operation to be applied on the current mask layer. Refer mask-composite.
Applies to
All elements. In SVG, it applies to container elements excluding the <defs> element and all graphics elements
Syntax
Keyword Values
mask: none;
Image Values
mask: url(shop.png);
mask: url(book.svg#star)
Combined Values
mask: url(heart.png) luminance; 
mask: url(heart.png) 40px 20px; 
mask: url(heart.png) 10px 10px / 100px 50px; 
mask: url(heart.png) repeat-y; 
mask: url(heart.png) border-box; 
mask: url(masks.svg#star) exclude; 
CSS mask - none Value
The following example demonstrates that the mask: none property removes applied masking effect from the element
<html>
<head>
<style>
   .mask-none {
      width: 200px;
      height: 200px;
      background-image: url("images/pink-flower.jpg");
      background-color: red;
      -webkit-mask: url(images/heart.png);
      -webkit-mask-size: 100% 100%;
   }
</style>
</head>
<body>
   <h2>Image with masking effect</h2>
   <div class="mask-none"></div>
   <h2>Image without masking effect</h2>
   <div class="mask-none" style="mask:none"></div>
</body>
</html>
CSS mask - <mask-reference>
The following example demonstrates that the mask: URL() property sets the image source as a mask layer for the div element 
<html>
<head>
<style>
   .mask-url {
   width: 200px;
   height: 200px;
   background-image: url("images/pink-flower.jpg");
   background-size: cover;
   -webkit-mask: url(images/heart.png);
   -webkit-mask-size: 100% 100%;
   }
</style>
</head>
<body>
   <div class="mask-url"></div>
</body>
</html>
CSS mask - <masking-mode>
The following example demonstrates that the -webkit-mask: linear-gradient(red 20%, pink 40%, green 60%, black 80%) luminance; property, creates a colorful gradient mask along with luminance value that affects the brightness of the image 
<html>
<head>
<style>
   img {
      display: block;
      width: 200px; 
      height: 200px;
      -webkit-mask: linear-gradient(red 20%, pink 40%, green 60%, black 80%) luminance;
      -webkit-mask-position: center;
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-size: 100% 100%;
   }
</style>
</head>
<body>
   <img src="images/pink-flower.jpg" alt="pink-flower">
</body>
</html>
CSS mask - <position>
The following example demonstrates the mask image using the url(images/heart.png) value and the 40px 20px values to set the position of the mask 
<html>
<head>
<style>
   .mask-container {
      width: 200px;
      height: 200px;
      background-image: url("images/pink-flower.jpg");
      background-size: cover;
      -webkit-mask: url(images/heart.png) 40px 20px;
      -webkit-mask-size: 100% 100%;
   }
</style>
</head>
<body>
   <div class="mask-container"></div>
</body>
</html>
CSS mask - <bg-size>
The following example demonstrates the mask image using the url(images/heart.png) value and 10px 10px values position the mask image, and 100px 50px sets the size of the mask 
<html>
<head>
<style>
   .mask-container {
      width: 200px;
      height: 200px;
      background-image: url("images/pink-flower.jpg");
      background-size: cover;
      -webkit-mask: url(images/heart.png) 10px 10px / 100px 50px;
      -webkit-mask-size: 100% 100%;
   }
</style>
</head>
<body>
   <div class="mask-container"></div>
</body>
</html>
CSS mask - <repeat-style>
The following example demonstrates the mask image using the url(images/heart.png) value and repeat-y value indicates that the mask image should be repeated vertically 
<html>
<head>
<style>
   .mask-container {
      width: 200px;
      height: 200px;
      background-image: url("images/pink-flower.jpg");
      background-size: cover;
      -webkit-mask: url(images/heart.png) repeat-y;
      -webkit-mask-size: 50px;
      -webkit-mask-position: center;
   }
</style>
</head>
<body>
   <div class="mask-container"></div>
</body>
</html>
CSS mask - <geometry-box>
The following example demonstrates the mask image using the url(images/shop.png) value and border-box value indicates that mask image is positioned and sized relative to the element's border-box including border and padding 
<html>
<head>
<style>
   .container {
      width: 250px;
      height: 200px;
      background-color: greenyellow;
      padding: 10px;
   }
   .masking-image {
      height: 120px;
      border: 20px solid red;
      padding: 10px;
      background-color: violet;
﻿
      -webkit-mask: url('images/shop.png') border-box;
      -webkit-mask-size: cover;
      -webkit-mask-repeat: no-repeat;
   }
</style>
</head>
<body>
   <p>The image has a violet background, and the red border around it. The areas outside the border will remain visible.</h3>
   <div class="container"><div class="masking-image"></div></div>
</body>
</html>
CSS mask - <geometry-box> | no-clip
The following example demonstrates the mask image using the url(images/bookmark.png) value.
The content-box value indicates that mask image is positioned and sized relative to the element's content-box and no-clip value prevents the mask image from being clipped to the element's content box.
<html>
<head>
<style>
   .box {
      max-width: 300px;
      border: 3px solid blue;
   }
   .mask-container {
      background-color: gold;
      display: block;
      padding: 20px;
      width: 220px;
      height: 220px;
      border: 20px solid red;
      -webkit-mask: url(images/bookmark.png) content-box no-clip;
      -webkit-mask-position: center center;
      -webkit-mask-repeat: repeat;
      -webkit-mask-size: 100px 100px;
   }
</style>
</head>
<body>
   <div class="box">
      <div class="mask-container">
         <img src="images/pink-flower.jpg" alt="pink flower" width="100%">
      </div>
   </div>
</body>
</html>
CSS mask - Related Properties
Following is the list of CSS properties related to mask:
property
value
﻿mask-clip﻿
Defines the area of an element that is affected by a mask.
﻿mask-composite﻿
Defines the area of an element that is affected by a mask.
﻿mask-image﻿
Display or hide specific areas of an element.
﻿mask-position﻿
Determines where a mask image is placed on an element.
﻿mask-repeat﻿
Repetition of an image along horizontal axis, vertical axis, both the axes, or not at all.
﻿mask-size﻿
Defines the size of the mask image.
﻿mask-origin﻿
Defines the origin of the mask image.
﻿mask-mode﻿
Defines whether the mask reference given by mask-image should be considered as a luminance or alpha mask.
﻿mask-border﻿
Creates a mask along the edge of an element's border.
﻿mask-border-mode﻿
Specifies the blending mode used in mask border.
﻿mask-border-outset﻿
Specifies the distance by which an element's mask border is set out from its border box.
﻿mask-border-repeat﻿
Sets how the edges of a source image are adjusted to fit the dimensions of an element's mask border.
﻿mask-border-slice﻿
Divides the image set by mask-border-source into regions.
﻿mask-border-source﻿
Sets the source image used to create an element's mask border.
﻿mask-border-width﻿
Sets the width of an element's mask border.
﻿
﻿
﻿
﻿
﻿
﻿
﻿
﻿

property	value
mask-clip	Defines the area of an element that is affected by a mask.
mask-composite	Defines the area of an element that is affected by a mask.
mask-image	Display or hide specific areas of an element.
mask-position	Determines where a mask image is placed on an element.
mask-repeat	Repetition of an image along horizontal axis, vertical axis, both the axes, or not at all.
mask-size	Defines the size of the mask image.
mask-origin	Defines the origin of the mask image.
mask-mode	Defines whether the mask reference given by mask-image should be considered as a luminance or alpha mask.
mask-border	Creates a mask along the edge of an element's border.
mask-border-mode	Specifies the blending mode used in mask border.
mask-border-outset	Specifies the distance by which an element's mask border is set out from its border box.
mask-border-repeat	Sets how the edges of a source image are adjusted to fit the dimensions of an element's mask border.
mask-border-slice	Divides the image set by mask-border-source into regions.
mask-border-source	Sets the source image used to create an element's mask border.
mask-border-width	Sets the width of an element's mask border.

CSS Tutorial

CSS Advanced

CSS3 Tutorial

CSS Responsive

CSS References

CSS tools

CSS Resources

CSS Tutorial

Masking - mask

Possible Values

Applies to

Syntax

Keyword Values

Image Values

Combined Values

CSS mask - none Value

CSS mask - <mask-reference>

CSS mask - <masking-mode>

CSS mask - <position>

CSS mask - <bg-size>

CSS mask - <repeat-style>

CSS mask - <geometry-box>

CSS mask - <geometry-box> | no-clip

CSS mask - Related Properties