![CSS Selectors](https://codetofun.com/wp-content/themes/codetofun/images/large/css-selectors.webp)
CSS Properties
CSS mask-position Property
![CSS mask-position Property](https://codetofun.com/wp-content/themes/codetofun/images/large/css-mask-position.webp)
Photo Credit to CodeToFun
🙋 Introduction
The mask-position
property in CSS is used to define the position of a mask image within an element.
Masking allows you to hide or reveal specific parts of an element based on the transparency and position of the mask image.
This property is especially useful for creating complex shapes, patterns, and visual effects by positioning the mask precisely.
💡 Syntax
The syntax for the mask-position
property is similar to that of the background-position property. It can accept values in different units, including percentages, pixels, and keywords.
element {
mask-position: x-position y-position;
}
- x-position: Specifies the horizontal position of the mask image.
- y-position: Specifies the vertical position of the mask image.
🎛️ Default Value
The default value of the mask-position
property is 0% 0%, which places the mask image at the top-left corner of the element.
🏠 Property Values
Value | Description |
---|---|
length | Specifies the position using length units like px, em, etc. |
percentage | Specifies the position as a percentage of the mask container's dimensions. |
keywords | Predefined keywords like top, left, bottom, right, center. |
📄 Example
In this example, we will position a mask image at the center of an element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS mask-position Example</title>
<style>
.masked {
width: 300px;
height: 200px;
background-color: #f3f3f3;
mask-image: url('mask.png');
mask-position: center;
mask-size: contain;
}
</style>
</head>
<body>
<h1>Element with Mask Positioned at Center</h1>
<div class="masked"></div>
</body>
</html>
In this example, the mask-position: center; positions the mask image at the center of the element.
🖥️ Browser Compatibility
The mask-position
property is supported in most modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. However, it is advisable to test your website across different browsers to ensure compatibility.
🎉 Conclusion
The mask-position
property is a versatile tool for web designers and developers looking to create unique and visually engaging content.
By controlling the position of the mask image, you can manipulate the visibility of parts of an element, allowing for creative design solutions. Experiment with different mask images and positions to achieve the desired effect on your website.
👨💻 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-position Property), please comment here. I will help you immediately.