<div class="controls">
<button data-origin="content-box" class="selected">content-box</button>
<button data-origin="padding-box">padding-box</button>
<button data-origin="border-box">border-box</button>
</div>
<div class="demo">
<div class="element"></div>
<div class="shadow"></div>
</div>
* {
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
height: 100vh;
}
.demo {
--img-size: 100%;
--gap: 40px;
position: relative;
flex: 1;
}
img {
display: block;
width: 100%;
max-width: 100%;
}
.element {
height: 100%;
max-width: var(--img-size);
background-size: cover;
background-image: url(https://picsum.photos/seed/1600/900);
background-size: cover;
background-clip: border-box;
background-origin: border-box;
background-repeat: no-repeat;
pointer-events: none;
-webkit-mask-image: url(https://i.imgur.com/NAUmQr8.png);
mask-image: url(https://i.imgur.com/NAUmQr8.png);
-webkit-mask-size: 200px;
mask-size: 200px;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: 0 0;
mask-position: 0 0;
-webkit-mask-origin: content-box;
mask-origin: content-box;
padding: var(--gap);
border: var(--gap) solid transparent;
}
.shadow {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: .2;
background-clip: content-box;
background-origin: content-box;
width: var(--img-size);
background-image: url(https://picsum.photos/seed/1600/900);
background-size: cover;
background-repeat: no-repeat;
}
.shadow::after {
box-sizing: border-box;
content: " ";
position: absolute;
top: var(--gap);
left: var(--gap);
right: var(--gap);
bottom: var(--gap);
border: var(--gap) solid hsla(0, 0%, 0%, .7);
box-shadow: 0 0 0 var(--gap) hsl(0, 100%, 50%, .7);
}
.controls {
display: flex;
gap: 1px;
}
button {
flex: 1;
padding: 1em 0;
border: 0;
outline: transparent;
background-color: #424242;
color: #fff;
cursor: pointer;
font-weight: bold;
}
button:hover {
background-color: #212121;
}
button.selected {
background-color: #ff8a00;
}
var element = document.querySelector('.element');
var buttons = document.querySelectorAll('button');
document.addEventListener('click', function (e) {
if(e.target.matches('button')) {
buttons.forEach(function(ele) {
ele.classList.remove('selected');
});
e.target.classList.add('selected');
element.style.MaskOrigin = e.target.getAttribute('data-origin');
element.style.webkitMaskOrigin = e.target.getAttribute('data-origin');
}
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.