Basic CSS Masking Example

Basic CSS Masking Example

by Bryson Murray

HTML

<svg height="0" width="0">
  <mask id="mymask">
    <image id="img" xlink:href="https://upmain.financialtown.com/financial_town/resources/[email protected]" x="0" y="0" height="37px" width="27px" />
    <!-- <image id="img" xlink:href="https://upmain.financialtown.com/financial_town/resources/pop/[email protected]" x="0" y="0" height="37px" width="27px" /> -->
  </mask>
</svg>

<div class="section-header">Original Image</div>
<div class="section">
  <div class="image-class">
     <img>
  </div>
</div>
<div class="section-header">Basic Color-izing Mask</div>
<div class="section">
  <div class="mask-class image-class" style="background-color: red;"></div>
  <div class="mask-class image-class" style="background-color: blue;"></div>
  <div class="mask-class image-class" style="background-color: green;"></div>
  <div class="mask-class image-class" style="background-color: orange;"></div>
  <br/>
  <div class="mask-class image-class" style="background-color: purple;"></div>
  <div class="mask-class image-class" style="background-color: yellow;"></div>
  <div class="mask-class image-class" style="background-color: brown;"></div>
  <div class="mask-class image-class" style="background-color: cyan;"></div>
</div>

<div class="section-header">Resizing Mask</div>
<div class="section">
  <div>Plain Image VS Mask Image</div>
  <div class="sub-section">
    <div style=" display: inline-block;">
       <img style="vertical-align: super;">
    </div>
    <div class="mask-class image-class" style="background-color: blue;"></div>
  </div>
  <div>Resized Plain Image VS Mask Image</div>
  <div class="sub-section">
    <div  style=" display: inline-block;" class="image-class plain-resized-image-class">
      <img style="vertical-align: super;" class="plain-resized-image-class">
    </div>
    <div class="resize-method1-mask-class image-class" ></div>
    <div class="resize-method2-mask-class image-class" ></div>
  </div>
</div>

CSS

:root{
  --test-image: url(https://upmain.financialtown.com/financial_town/resources/[email protected]);
  /* --test-image: url(https://upmain.financialtown.com/financial_town/resources/pop/[email protected]); */
  --test-image-width: 37px;
  --test-image-height: 27px;
  
  --resize-width: 21px;
  --resize-height: 15px;
  
  --resize-background-color: orange;
  --resize-container-width: 21px;
  --resize-container-height: 15px;
}

body{
  background-color: darkgray;
}

div.section-header {
  display: block;
  font: 18px Georgia, sans-serif;
}

div.section{
  font: italic bold 12px Georgia, serif;
  border: 2px solid gray;
  text-align: center;
}

div.sub-section{
  vertical-align: top;
  display: -webkit-inline-box;
}

div.section img{
  content: var(--test-image);
}

.image-class{
  margin: 5px;
  display: inline-block;
}

.plain-image-class{
  width: var(--test-image-width);
  height: var(--test-image-height);
  display: flex;
}

.plain-resized-image-class{
  width: var(--resize-width);
  height: var(--resize-height);
  display: flex;
}

.mask-class{
  width: var(--test-image-width);
  height: var(--test-image-height);
  mask: var(--test-image) center center; 
  mask-repeat: no-repeat;
  -webkit-mask: var(--test-image) center center;
  -webkit-mask-repeat: no-repeat;
}

 /*
   method1 is the cleaner solution only requiring changes in the css file   
 */ 
.resize-method1-mask-class{
   width: var(--resize-container-width);
   height: var(--resize-container-height);
   background-color: var(--resize-background-color);
    
   mask: var(--test-image) center center; 
   mask-size: var(--resize-width) var(--resize-height);
   mask-repeat: no-repeat;
   -webkit-mask: var(--test-image) center center;
   -webkit-mask-size: var(--resize-width) var(--resize-height);
   -webkit-mask-repeat: no-repeat;
}


/*
  Method 2 uses a <svg> with a mask in it that needs to be in your htm.
  It also requires a bit more setup inside the <mask> tag and in the css
  which can clash...