神刀安全网

Colofilter.css: Duotone filter with CSS

close spotify examples

Colofilter.css: Duotone filter with CSS Colofilter.css: Duotone filter with CSS Colofilter.css: Duotone filter with CSS Colofilter.css: Duotone filter with CSS

To use those filters, download the colofilter.css file, add it to the head of your document :

<link href="path/to/colofilter.css" rel="stylesheet" type="text/css">

Then to use the filters, use the proper classes on your elements, and that’s it!

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

Examples (click the images to copy the classes) :

Colofilter.css: Duotone filter with CSS lorem
Colofilter.css: Duotone filter with CSS lorem
Colofilter.css: Duotone filter with CSS lorem
Colofilter.css: Duotone filter with CSS lorem
Colofilter.css: Duotone filter with CSS lorem
Colofilter.css: Duotone filter with CSS lorem
Colofilter.css: Duotone filter with CSS lorem
Colofilter.css: Duotone filter with CSS lorem
Colofilter.css: Duotone filter with CSS lorem
Colofilter.css: Duotone filter with CSS lorem
Colofilter.css: Duotone filter with CSS lorem
Colofilter.css: Duotone filter with CSS lorem
Colofilter.css: Duotone filter with CSS lorem
Colofilter.css: Duotone filter with CSS lorem
Colofilter.css: Duotone filter with CSS lorem
Colofilter.css: Duotone filter with CSS lorem
Colofilter.css: Duotone filter with CSS lorem
Colofilter.css: Duotone filter with CSS lorem
Colofilter.css: Duotone filter with CSS lorem
Colofilter.css: Duotone filter with CSS lorem
Colofilter.css: Duotone filter with CSS lorem
Colofilter.css: Duotone filter with CSS lorem
Colofilter.css: Duotone filter with CSS lorem
Colofilter.css: Duotone filter with CSS lorem
Colofilter.css: Duotone filter with CSS lorem
Colofilter.css: Duotone filter with CSS lorem
Colofilter.css: Duotone filter with CSS lorem
Colofilter.css: Duotone filter with CSS lorem
Colofilter.css: Duotone filter with CSS lorem
Colofilter.css: Duotone filter with CSS lorem

Unfortunately, it will not work with IE & Edge browsers, as well as Opera Mini , and Safari (desktop & IOS ) is not supporting the hue , saturation , color , and luminosity blend modes.

See compatibility for : mixblendmode filters

A polyfill is on it’s way!

原文  http://lukyvj.github.io/colofilter.css/

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Colofilter.css: Duotone filter with CSS

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮