From 100ccd587b0a96b7410269192e278c95646c6706 Mon Sep 17 00:00:00 2001 From: Rubens Mariuzzo Date: Tue, 24 Jan 2012 21:20:10 -0400 Subject: [PATCH 1/3] Soft light blending mode added. --- lib/less/functions.js | 12 ++++++++++++ test/css/functions.css | 3 +++ test/less/functions.less | 4 ++++ 3 files changed, 19 insertions(+) diff --git a/lib/less/functions.js b/lib/less/functions.js index 6eb34bac8..d7f7ec0ec 100644 --- a/lib/less/functions.js +++ b/lib/less/functions.js @@ -201,6 +201,18 @@ tree.functions = { }, _isa: function (n, Type) { return (n instanceof Type) ? tree.True : tree.False; + }, + + /* Blending modes */ + + 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; + t = color2.rgb[1] * color1.rgb[1] / 255; + var g = t + color1.rgb[1] * (255 - (255 - color1.rgb[1]) * (255 - color2.rgb[1]) / 255 - t) / 255; + 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); } }; diff --git a/test/css/functions.css b/test/css/functions.css index 823281457..3dda072b7 100644 --- a/test/css/functions.css +++ b/test/css/functions.css @@ -41,3 +41,6 @@ #alpha { alpha: rgba(153, 94, 51, 0.6); } +#blendmodes { + softlight: #ff0000; +} diff --git a/test/less/functions.less b/test/less/functions.less index 535d2efde..388ff57b9 100644 --- a/test/less/functions.less +++ b/test/less/functions.less @@ -47,3 +47,7 @@ #alpha { alpha: darken(hsla(25, 50%, 50%, 0.6), 10%); } + +#blendmodes { + softlight: softlight(#f60000, #ffffff); +} From 990d97fa2351497fcbc4e4f22c4f981eb03e8890 Mon Sep 17 00:00:00 2001 From: Rubens Mariuzzo Date: Wed, 25 Jan 2012 00:58:20 -0400 Subject: [PATCH 2/3] 8 more blending modes added: multiply, screen, overlay, hardlight, difference, exclusion, average & negation. --- lib/less/functions.js | 48 ++++++++++++++++++++++++++++++++++++++++ test/css/functions.css | 8 +++++++ test/less/functions.less | 8 +++++++ 3 files changed, 64 insertions(+) diff --git a/lib/less/functions.js b/lib/less/functions.js index d7f7ec0ec..75f121f71 100644 --- a/lib/less/functions.js +++ b/lib/less/functions.js @@ -205,6 +205,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; @@ -213,6 +231,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); } }; diff --git a/test/css/functions.css b/test/css/functions.css index 3dda072b7..8e03aff22 100644 --- a/test/css/functions.css +++ b/test/css/functions.css @@ -42,5 +42,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; } diff --git a/test/less/functions.less b/test/less/functions.less index 388ff57b9..abc41e9ea 100644 --- a/test/less/functions.less +++ b/test/less/functions.less @@ -49,5 +49,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); } From bd854af0726c83d04e3fe70f86a57722f63ed479 Mon Sep 17 00:00:00 2001 From: Rubens Mariuzzo Date: Wed, 25 Jan 2012 01:07:38 -0400 Subject: [PATCH 3/3] Update README.md --- README.md | 29 ++++++++++++++++++++++------- 1 file changed, 22 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 726d6910f..e0402fe0b 100644 --- a/README.md +++ b/README.md @@ -1,20 +1,35 @@ -less.js -======= +less.js + blending modes +======================== -The **dynamic** stylesheet language. +The **dynamic** stylesheet language, powered with blending modes. - +The full credits for the original project of LESS goes to Alexis Sellier, more information: . about ----- -This is the JavaScript, and now official, stable version of LESS. +This is the JavaScript stable version of LESS with some blending modes (such those from Photoshop, GIMP or Fireworks). -For more information, visit . +These blending methods are implemented as LESS operations. + +blending modes +-------------- + +**list of implemented blending modes** + + * multiply + * screen + * overlay + * softlight + * hardlight + * difference + * exclusion + * average + * negation license ------- See `LICENSE` file. -> Copyright (c) 2009-2011 Alexis Sellier +> Copyright (c) 2012 Rubens Mariuzzo