Less.js Color Blending screen() Function
Last Updated :
28 Sep, 2022
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;">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.
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;">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
Similar Reads
Less.js Color Blending Functions
In this article, we are going to see Color Blending Functions in Less.js. Less (Leaner Style Sheets) is an extension to normal CSS code which basically enhances the abilities of normal CSS and provides it superpowers. Color blending functions are provided by Less.js to basically perform blending op
5 min read
Less.js Color Blending negation() Function
Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. Because it uses a dynamic style sheet language, CSS is more useful. LESS is adaptable enough to function in a variety of browsers. In order for web browsers to use
4 min read
Less.js Color Blending overlay() Function
Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. CSS is more functional because of this dynamic style sheet language. Cross-browser interoperability is a feature of LESS. A computer language known as the CSS pre-
4 min read
Less.js Color Blending softlight() Function
Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. Because of this dynamic style sheet language, CSS is more useful. Interoperability between browsers is a characteristic of LESS. The CSS pre-processor is a compute
4 min read
Less.js Color Blending multiply() Function
In this article, we will see the Color Blending multiply() Function in LESS.js. Less.js is an extension to the traditional CSS, it comes with additional features that will help us to write CSS code more conveniently. Color blending is a method that takes the intersection of two colors, or generally,
4 min read
Less.js Color Blending average() Function
Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. CSS is more beneficial because it makes use of a dynamic style sheet language. LESS is flexible enough to work in a wide range of browsers. The CSS pre-processor i
4 min read
Less.js Color Blending hardlight() Function
Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. CSS is more practical as a result of its dynamic style sheet language. LESS has the flexibility to work with different browsers. A computer language called the CSS
4 min read
Less.js Color Blending exclusion() Function
Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. Because it uses a dynamic style sheet language, CSS is more useful. LESS is adaptable enough to function in a variety of browsers. In order for web browsers to use
4 min read
Less.js Color Blending difference() Function
Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. Because it uses a dynamic style sheet language, CSS is more useful. LESS is adaptable enough to function in a variety of browsers. In order for web browsers to use
4 min read
Less.js Color Channel red() Function
Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. CSS is more functional because of this dynamic style sheet language. Cross-browser interoperability is a feature of LESS. A computer language known as the CSS pre-
3 min read