Grayscale for text

by Alexander Zonov

HTML

<div class="js ready first">
  <a href="http://home.video/" class="js-mod red">Линочка</a><br/><br/>
  <a href="http://home.video/" class="js-mod yellow">Линочка</a><br/><br/>
  <a href="http://home.video/" class="js-mod green">Линочка</a>
  <img src="http://labs.voronianski.com/css3-grayscale/example_alice.jpg" class="js-mod" alt="">
</div>

CSS

.green {
  color: green;
}

.yellow {
  color: yellow;
}

.red {
  color: red;
}

.js.ready.first .js-mod {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGZpbHRlciBpZD0iZ3JleXNjYWxlIj48ZmVDb2xvck1hdHJpeCB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMC4zMzMzIDAuMzMzMyAwLjMzMzMgMCAwIDAuMzMzMyAwLjMzMzMgMC4zMzMzIDAgMCAwLjMzMzMgMC4zMzMzIDAuMzMzMyAwIDAgMCAgMCAgMCAgMSAwIi8+PC9maWx0ZXI+PC9zdmc+);
  filter: gray;
}