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
.container 1 {
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
.container 1 {
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
.container 1 {
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
.container 1 {
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
Share your thoughts in the comments
Please Login to comment...