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" />
CSS
gradient
See the Expressing colors in CSS tutorial to understand how RGB color notation works.
The gradient can be radial (radial-gradient) or linear (linear-gradient). See the CSS gradient tutorial for details on creating gradients.
img {
mask-image: radial-gradient(circle, white 60%, rgba(0, 0, 0, 0.4) 50%);
}
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.
img {
mask-image: url(e-acute-microsoft-word-no-bg.png);
}
References:
- W3Schools.com (no date) The mask-image Property. Available at: https://www.w3schools.com/css/css3_masking.asp (Accessed: 14 November 2024).