In this article, we will see the Color Blending screen() Function in LESS.js, along with understanding its basic implementation through the illustrations.
Less.js is basically a CSS tool that provides additional features to traditional CSS. Color blending means when we blend or mix two separate color ranges, we get a variety of different output colors as a result which depends on which color blending method is being used. The screen() method generally gives a bright color as result.
Screen() Function: The working principle of screen() functions is quite similar to the mathematical multiplication operation. The white color works as 0 and the black color works as 1. When we put the second color with white, the result color is also white because as we know everything multiplies with 0 becomes 0, and when we put the first color with black color, then we get the same color in the resultant color because everything multiplied with 1 remains the same.
Syntax:
<css property> : screen(first color, second color);
Parameter values:
- first color: it accepts a color value, that could be HEX value, RGB value, or absolute color name.
- Second color: it also accepts a color value, which could be a HEX value, RGB value, or absolute color name.
Return type: The return type for this function will be the color.
Example 1: In this example, we will use the green color as the first color and white as a 2nd color and we can see the white color in the output.
Style.less
.container1 { height: 200px; width: 600px; border: 1px solid black; border-radius: 10px; background-color: #313131; color: white; } .function { text-align: center; } .colors { height: 150px; width: 100%; display: flex; flex-direction: row; justify-content: space-evenly; align-items: center; } .firstColor, .secondColor, .thirdColor { height: 100px; width: 100px; } .firstColor { background-color: #008000; color: white; } .secondColor { background-color: #ffffff; color: black; } .thirdColor { background-color: screen(#008000, #ffffff); color: black; } |
To compile the Less.js code to CSS, use the following command:
lessc styles.less styles.css
Style.css
.container1 { height: 200px; width: 600px; border: 1px solid black; border-radius: 10px; background-color: #313131; color: white; } .function { text-align: center; } .colors { height: 150px; width: 100%; display: flex; flex-direction: row; justify-content: space-evenly; align-items: center; } .firstColor, .secondColor, .thirdColor { height: 100px; width: 100px; } .firstColor { background-color: #008000; color: white; } .secondColor { background-color: #ffffff; color: black; } .thirdColor { background-color: #ffffff; color: black; } |
HTML Code:
HTML
<!DOCTYPE html> <html> <head> <title>LESS.js Color Blending Function</title> <link rel="stylesheet" href="Style.css"> </head> <body> <h2 style="color: green;">neveropen</h2> <div class="container1"> <div class="function"> <h3>Screen</h3> </div> <div class="colors"> <div class="firstColor">1st color</div> <div class="secondColor">2nd color</div> <div class="thirdColor">Result</div> </div> </div> </body> </html> |
Output:
Example 2: In this example, we will use green as the first color and black as a second color and we can see the output color is also green.
Style.less
.container1 { height: 200px; width: 600px; border: 1px solid black; border-radius: 10px; background-color: #313131; color: white; } .firstColor, .secondColor, .thirdColor { height: 100px; width: 100px; display: flex; justify-content: center; align-items: center; } .function { text-align: center; } .colors { height: 150px; width: 100%; display: flex; flex-direction: row; justify-content: space-evenly; align-items: center; } .firstColor { background-color: #008000; color: white; } .secondColor { background-color: #000000; color: white; } .thirdColor { background-color: screen(#008000, #000000); color: black; } |
To compile the Less.js code to CSS, use the following command:
lessc styles.less styles.css
Style.css
.container1 { height: 200px; width: 600px; border: 1px solid black; border-radius: 10px; background-color: #313131; color: white; } .firstColor, .secondColor, .thirdColor { height: 100px; width: 100px; display: flex; justify-content: center; align-items: center; } .function { text-align: center; } .colors { height: 150px; width: 100%; display: flex; flex-direction: row; justify-content: space-evenly; align-items: center; } .firstColor { background-color: #008000; color: white; } .secondColor { background-color: #000000; color: white; } .thirdColor { background-color: #008000; color: black; } |
HTML Code:
HTML
<!DOCTYPE html> <html> <head> <title>LESS.js Color Blending Function</title> <link rel="stylesheet" href="Style.css"> </head> <body> <h2 style="color: green;">neveropen</h2> <div class="container1"> <div class="function"> <h3>Screen</h3> </div> <div class="colors"> <div class="firstColor">1st color</div> <div class="secondColor">2nd color</div> <div class="thirdColor">Result</div> </div> </div> </body> </html> |
Output:
Reference: https://lesscss.org/functions/#color-blending-screen
