Monotone an Image with CSS

0
0

You can always apply a filter to an element to make it monotone in the grayscale sense:

HTML

<img src=”https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/sara-shirt-example.jpg”>

<img src=”https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/sara-shirt-example.jpg” class=”filtered”>

CSS

.filtered {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}

img {
float: left;
max-width: 50%;
border: 10px solid white;
}

* {
box-sizing: border-box;
}

 

If you put that in a container with a background color and lower the opacity, you can get a colored monotone kind of effect:

HTML

<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/sara-shirt-example.jpg" class="not-filtered">

<div class="filtered">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/sara-shirt-example.jpg">
</div>

CSS

.filtered {
   background: yellow;
   position: relative;
}
.filtered img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.5;
}

.filtered,
.not-filtered {
  float: left;
  max-width: 50%;
  border: 10px solid white;
}
img {
  display: block;
  max-width: 100%;
}
* {
  box-sizing: border-box;
}


Maarten van der Velde wrote in to say that rather than lowering the opacity, we can combine it with mix-blend-mode and blowing out the contrast:
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/sara-shirt-example.jpg" class="not-filtered">

<div class="filtered">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/sara-shirt-example.jpg">
</div>

CSS
.filtered {
   background: #00c2ff;
}

.filtered img {
  mix-blend-mode: screen;
  -webkit-filter: grayscale(100%) contrast(200%);
  filter: grayscale(100%) contrast(200%);
  opacity: 1;
}

.filtered,
.not-filtered {
  float: left;
  max-width: 50%;
  border: 10px solid white;
}
img {
  display: block;
  max-width: 100%;
}
* {
  box-sizing: border-box;
}


Amelia Bellamy-Royds also covered using SVG color filters to do this, which has an amazing amount of control:

HTML

<svg class="defs-only">
  <filter id="monochrome" color-interpolation-filters="sRGB"
          x="0" y="0" height="100%" width="100%">
    <feColorMatrix type="matrix"
      values="0.95 0 0 0 0.05 
              0.85 0 0 0 0.15  
              0.50 0 0 0 0.50 
              0    0 0 1 0" />
  </filter>
</svg>
<a class="profile-link" href="#" title="More about Amelia Bellamy-Royds">
  <img class="profile-pic" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91525/AmeliaBR-bw.jpg"/></a>
<a class="profile-link" href="#" title="More about AmeliaBR">
  <img class="profile-pic" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91525/AmeliaBR2-bw.jpg"/></a>

CSS
.profile-link {
  display: inline-block;
  padding: 1em;
  width: 10em;
  max-width: 80%;
}
.profile-pic {
  width: 100%;
  height: auto;
  border-radius: 50%;
  box-shadow: #222 0.2em 0.2em 1em;
  /*
  transition: filter 0.3s, box-shadow 0.3s;
  -webkit-transition: filter 0.3s, -webkit-filter 0.3s, box-shadow 0.3s;
}
.profile-link:hover .profile-pic, 
.profile-link:focus .profile-pic {
  */
  -webkit-filter: url(#monochrome);
  filter:  url(#monochrome);
  box-shadow: #224 0.2em 0.2em 0.6em 0.1em;
}
.defs-only {
  position: absolute;
  height: 0; width: 0;
  overflow: none;
  left: -100%;
}
  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.