![CSS Selectors](https://codetofun.com/wp-content/themes/codetofun/images/large/css-selectors.webp)
CSS Properties
CSS mask-origin Property
![CSS mask-origin Property](https://codetofun.com/wp-content/themes/codetofun/images/large/css-mask-origin.webp)
Photo Credit to CodeToFun
🙋 Introduction
The mask-origin
property in CSS is used to define the origin of the mask image used on an element.
This property determines the positioning area for the mask image, similar to the background-origin property for background images.
It can be particularly useful when you want to control how the mask image is applied to an element's content box, padding box, or border box.
💡 Syntax
The syntax for the mask-origin
property is as follows:
element {
mask-origin: value;
}
Here, value can be one of several keywords specifying the area to which the mask image is applied.
🎛️ Default Value
The default value of the mask-origin
property is border-box. This means the mask image is positioned relative to the border box of the element by default.
🏠 Property Values
Value | Description |
---|---|
border-box | The mask image is positioned relative to the border box. |
padding-box | The mask image is positioned relative to the padding box. |
content-box | The mask image is positioned relative to the content box. |
📄 Example
In this example, we will apply a mask image to an element and use the mask-origin
property to specify the origin of the mask.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS mask-origin Example</title>
<style>
.masked-element {
width: 300px;
height: 200px;
background-color: lightblue;
mask-image: url('mask.png');
mask-size: contain;
mask-origin: padding-box;
}
</style>
</head>
<body>
<h1>Masked Element with Custom Origin</h1>
<div class="masked-element"></div>
</body>
</html>
In this example, the mask image will be positioned relative to the padding box of the element, rather than the default border box.
🖥️ Browser Compatibility
The mask-origin
property is supported in modern browsers, including the latest versions of Chrome, Firefox, Safari, and Edge. As with any CSS property, it's a good practice to test your implementation across different browsers to ensure consistent behavior.
🎉 Conclusion
The mask-origin
property is a valuable tool for web developers looking to control the positioning of mask images in relation to an element's boxes.
By understanding and using this property, you can create more precise and visually appealing designs. Experiment with different values and see how they affect the appearance of your masked elements.
👨💻 Join our Community:
Author
![author](https://codetofun.com/wp-content/themes/codetofun/images/mari-selvan-400.webp)
For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.
Buy me a coffee to make codetofun.com free for everyone.
Buy me a Coffee
If you have any doubts regarding this article (CSS mask-origin Property), please comment here. I will help you immediately.