postcss-infrared-filter
v1.0.0
Published
Use an infrared photo effect in CSS
Downloads
19
Readme
Infrared Filter
Infrared Filter lets you use an infrared photography filter in CSS. This effect was created and coded by Una Kravets’ in her excellent post Infrared Photography.
/* before */
.creek {
background: url(https://upload.wikimedia.org/wikipedia/commons/0/06/Cayoosh-creek.jpg);
filter: infrared(-60);
height: 426px;
position: relative;
width: 568px;
}
/* after */
.creek::after {
background: url(https://upload.wikimedia.org/wikipedia/commons/0/06/Cayoosh-creek.jpg);
position: relative;
filter: invert(1) saturate(.75) hue-rotate(-60deg);
content: "";
display: block;
height: 100%;
mix-blend-mode: color;
property: absolute;
width: 100%;
}
.creek {
background: url(https://upload.wikimedia.org/wikipedia/commons/0/06/Cayoosh-creek.jpg);
height: 426px;
position: relative;
width: 568px;
}
Usage
Add Infrared Filter to your build tool:
npm install postcss-infrared-filter --save-dev
Node
require('postcss-infrared-filter').process(YOUR_CSS);
PostCSS
Add PostCSS to your build tool:
npm install postcss --save-dev
Load Infrared Filter as a PostCSS plugin:
postcss([
require('postcss-infrared-filter')()
]);
Gulp
Add Gulp PostCSS to your build tool:
npm install gulp-postcss --save-dev
Enable Infrared Filter within your Gulpfile:
var postcss = require('gulp-postcss');
gulp.task('css', function () {
return gulp.src('./css/src/*.css').pipe(
postcss([
require('postcss-infrared-filter')()
])
).pipe(
gulp.dest('./css')
);
});
Grunt
Add Grunt PostCSS to your build tool:
npm install grunt-postcss --save-dev
Enable Infrared Filter within your Gruntfile:
grunt.loadNpmTasks('grunt-postcss');
grunt.initConfig({
postcss: {
options: {
processors: [
require('postcss-infrared-filter')()
]
},
dist: {
src: 'css/*.css'
}
}
});