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.
.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
.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:
<!DOCTYPE html> <html>
<head>
<title>LESS.js Color Blending Function</title>
<link rel="stylesheet" href="Style.css">
</head>
<body>
<h2 style="color: green;">GeeksforGeeks</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.
.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
.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:
<!DOCTYPE html> <html>
<head>
<title>LESS.js Color Blending Function</title>
<link rel="stylesheet" href="Style.css">
</head>
<body>
<h2 style="color: green;">GeeksforGeeks</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