Duotone Image Filters Using CSS Blend Modes – Colofilter.css

Category: CSS & CSS3 , Image , Recommended | December 30, 2015
Author:LukyVj
Views Total:2,393 views
Official Page:Go to website
Last Update:December 30, 2015
License:MIT

Preview:

Duotone Image Filters Using CSS Blend Modes – Colofilter.css

Description:

Colofilter.css is a pure CSS library that uses CSS blend modes to apply various types of ‘duotone’ filters to your images.

How to use it:

Download and include the Colofilter.css in the document’s head sections as follow.

<link href="colofilter.css" rel="stylesheet">

Apply ‘duotone’ filters to your images.

<div class="blend-blue">
  <img src="image.png">
  <span>lorem</span>
</div>

All CSS classes.

  • blend-blue
  • blend-blue-dark
  • blend-blue-light
  • blend-orange
  • blend-orange-dark
  • blend-orange-light
  • blend-red
  • blend-red-dark
  • blend-red-light
  • blend-green
  • blend-green-dark
  • blend-green-light
  • blend-yellow
  • blend-yellow-dark
  • blend-yellow-light
  • blend-purple
  • blend-purple-dark
  • blend-purple-light
  • blend-pink
  • blend-pink-dark
  • blend-pink-light
  • blend-blue-yellow
  • blend-blue-yellow-dark
  • blend-blue-yellow-light
  • blend-pink-yellow
  • blend-pink-yellow-dark
  • blend-pink-yellow-light
  • blend-red-blue
  • blend-red-blue-dark
  • blend-red-blue-light

Preview:

Colofilter.css

You Might Be Interested In:


Leave a Reply