Mask Image Practice Part One


by Jeremy Caudle
code

Working with mask-image today after watching Chris Coyier's Youtube video on the subject. I ran into some very strange behavior with test code from MDN on both Chrome and Firefox on my Windows 10 PC. However, that same code worked perfectly in Safari on iPadOS 13. It was very odd and that tells I still have lots to learn. That never changes.

View the code:

HTML and JS 
<div class="codedoodle-block">
			
		<div class="linear"></div>
		
		</div>
CSS 
.codedoodle-block {
			background: orange;
			margin: 0;
			padding: 1rem;
			}
		
			.linear {
				width: 100%;
				height: 100vh;
				background: green;
				mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);
				-webkit-mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);
			}

Tags