The mask effect is a common design technique used to create the illusion that you are looking at something through something else. This is yet another example of how CSS can be used on web pages for visual design effects that were previously only possible using images (see the Shadows with CSS tutorial for another example).
Demo
View a basic demo here: https://www.stylus.co.za/demo_css/css_mask.php
HTML
The minimum HTML for this tutorial is:
<img src="south_african_flag.jpg" width="400" height="320" />
gradient
See the Expressing colors in CSS tutorial to understand how RGB colour notation works.
The gradient can be radial (radial-gradient) or linear (linear-gradient). See the CSS gradient tutorial for details on creating gradients.
HTML
<img src="south_african_flag.jpg" width="400" height="320" />
CSS
img {
mask-image: radial-gradient(circle, white 60%, rgba(0, 0, 0, 0.4) 50%);
}
clip-path
The following examples use an image as the path – in other words, you are clipping the shape of the image. You can clip the path to the following: circle(), ellipse(), polygon() or inset()
circle
polygon
<img src="https://www.stylus.co.za/wp-content/uploads/2024/11/south_african_flag.jpg" alt="South African flag." />
img {
clip-path: polygon(0 0, 80% 0, 100% 50%, 80% 100%, 0% 100%);
}
Defining the polygon shape is not as difficult as it seems at first. Remember, this is a clip-path, meaning it is associated directly with (in this example) the dimensions of the south_african_flag.jpg image. The pairs of values separated with commas are 𝓍 & 𝓎 coordinates.
mask-image
The image used for this example is a very simple one used elsewhere in the blog. It is important to note that the image used for the mask (see image to the right) is a simple black letter and more importantly that the background is transparent.
HTML
<img src="https://www.stylus.co.za/wp-content/uploads/2024/11/south_african_flag.jpg"/>
CSS
img {
mask-image: url(e-acute-microsoft-word-no-bg.png);
mask-repeat: no-repeat;
}
Results in:
References:
- W3Schools.com (no date) The mask-image Property. Available at: https://www.w3schools.com/css/css3_masking.asp (Accessed: 14 November 2024).