github/less.js
1
1
Fork 0
mirror of https://github.com/less/less.js.git synced 2026-04-09 03:00:20 -04:00
Code Issues Packages Projects Releases Wiki Activity

8 more blending modes added: multiply, screen, overlay, hardlight, difference, exclusion, average & negation.

Browse Source
This commit is contained in:
Rubens Mariuzzo
2012-01-25 00:58:20 -04:00
committed by Luke Page
parent 6e97b8f694
commit 0a5245b2c3
3 changed files with 64 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
lib/less/functions.js
View File

@@ -241,6 +241,24 @@ tree.functions = {
/* Blending modes */
multiply: function(color1, color2) {
var r = color1.rgb[0] * color2.rgb[0] / 255;
var g = color1.rgb[1] * color2.rgb[1] / 255;
var b = color1.rgb[2] * color2.rgb[2] / 255;
return this.rgb(r, g, b);
},
screen: function(color1, color2) {
var r = 255 - (255 - color1.rgb[0]) * (255 - color2.rgb[0]) / 255;
var g = 255 - (255 - color1.rgb[1]) * (255 - color2.rgb[1]) / 255;
var b = 255 - (255 - color1.rgb[2]) * (255 - color2.rgb[2]) / 255;
return this.rgb(r, g, b);
},
overlay: function(color1, color2) {
var r = color1.rgb[0] < 128 ? 2 * color1.rgb[0] * color2.rgb[0] / 255 : 255 - 2 * (255 - color1.rgb[0]) * (255 - color2.rgb[0]) / 255;
var g = color1.rgb[1] < 128 ? 2 * color1.rgb[1] * color2.rgb[1] / 255 : 255 - 2 * (255 - color1.rgb[1]) * (255 - color2.rgb[1]) / 255;
var b = color1.rgb[2] < 128 ? 2 * color1.rgb[2] * color2.rgb[2] / 255 : 255 - 2 * (255 - color1.rgb[2]) * (255 - color2.rgb[2]) / 255;
return this.rgb(r, g, b);
},
softlight: function(color1, color2) {
var t = color2.rgb[0] * color1.rgb[0] / 255;
var r = t + color1.rgb[0] * (255 - (255 - color1.rgb[0]) * (255 - color2.rgb[0]) / 255 - t) / 255;
@@ -249,6 +267,36 @@ tree.functions = {
t = color2.rgb[2] * color1.rgb[2] / 255;
var b = t + color1.rgb[2] * (255 - (255 - color1.rgb[2]) * (255 - color2.rgb[2]) / 255 - t) / 255;
return this.rgb(r, g, b);
},
hardlight: function(color1, color2) {
var r = color2.rgb[0] < 128 ? 2 * color2.rgb[0] * color1.rgb[0] / 255 : 255 - 2 * (255 - color2.rgb[0]) * (255 - color1.rgb[0]) / 255;
var g = color2.rgb[1] < 128 ? 2 * color2.rgb[1] * color1.rgb[1] / 255 : 255 - 2 * (255 - color2.rgb[1]) * (255 - color1.rgb[1]) / 255;
var b = color2.rgb[2] < 128 ? 2 * color2.rgb[2] * color1.rgb[2] / 255 : 255 - 2 * (255 - color2.rgb[2]) * (255 - color1.rgb[2]) / 255;
return this.rgb(r, g, b);
},
difference: function(color1, color2) {
var r = Math.abs(color1.rgb[0] - color2.rgb[0]);
var g = Math.abs(color1.rgb[1] - color2.rgb[1]);
var b = Math.abs(color1.rgb[2] - color2.rgb[2]);
return this.rgb(r, g, b);
},
exclusion: function(color1, color2) {
var r = color1.rgb[0] + color2.rgb[0] * (255 - color1.rgb[0] - color1.rgb[0]) / 255;
var g = color1.rgb[1] + color2.rgb[1] * (255 - color1.rgb[1] - color1.rgb[1]) / 255;
var b = color1.rgb[2] + color2.rgb[2] * (255 - color1.rgb[2] - color1.rgb[2]) / 255;
return this.rgb(r, g, b);
},
average: function(color1, color2) {
var r = (color1.rgb[0] + color2.rgb[0]) / 2;
var g = (color1.rgb[1] + color2.rgb[1]) / 2;
var b = (color1.rgb[2] + color2.rgb[2]) / 2;
return this.rgb(r, g, b);
},
negation: function(color1, color2) {
var r = 255 - Math.abs(255 - color2.rgb[0] - color1.rgb[0]);
var g = 255 - Math.abs(255 - color2.rgb[1] - color1.rgb[1]);
var b = 255 - Math.abs(255 - color2.rgb[2] - color1.rgb[2]);
return this.rgb(r, g, b);
}
};

8
test/css/functions.css
View File

@@ -71,5 +71,13 @@
alpha: rgba(153, 94, 51, 0.6);
}
#blendmodes {
multiply: #ed0000;
screen: #f600f6;
overlay: #ed0000;
softlight: #ff0000;
hardlight: #0000ed;
difference: #f600f6;
exclusion: #f600f6;
average: #7b007b;
negation: #d73131;
}

8
test/less/functions.less
View File

@@ -79,5 +79,13 @@
}
#blendmodes {
multiply: multiply(#f60000, #f60000);
screen: screen(#f60000, #0000f6);
overlay: overlay(#f60000, #0000f6);
softlight: softlight(#f60000, #ffffff);
hardlight: hardlight(#f60000, #0000f6);
difference: difference(#f60000, #0000f6);
exclusion: exclusion(#f60000, #0000f6);
average: average(#f60000, #0000f6);
negation: negation(#f60000, #313131);
}