CSS - Mixblendmode
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/*The mix-blend-mode specifies how an element's content should blend with its direct parent background.You can use it between text and image ,image and image,image and color,linear gradient and color,text and text*/
*{
margin:auto;
}
#box{
margin-top:50px;
width:30vw;
height:30vh;
background-size:100%;
background-image:url("back2.jpg");
}
.head,.head1,.head2,.head3,.head4,.head5,.head6,.head7,.head8,.head9,.head10,.head11,.head12,.head13,.head14,.head15,.head16{
position:relative;
top:60px;
background-color:red;
display: flex;
justify-content: center;
font-size:8vw;
font-size:8vh;
color:orange;
}
.head{
mix-blend-mode: normal;
}
.head1{
mix-blend-mode: screen;
}
.head2{
mix-blend-mode: overlay;
}
.head3{
mix-blend-mode: multiply;
}
.head4{
mix-blend-mode: color-dodge;
}
.head5{
mix-blend-mode: difference;
}
.head6{
mix-blend-mode: hue;
}
.head7{
mix-blend-mode: color;
}
.head8{
mix-blend-mode: color-burn;
}
.imag{
width:30vw;
height:30vh;
mix-blend-mode: overlay;
background-image:url("back1.jpg");
}
.colo{
background-color:orange;
mix-blend-mode:saturation;
width:30vw;
height:30vh;
}
.head9{
mix-blend-mode: hard-light;
}
.head10{
mix-blend-mode: soft-light;
}
.head11{
mix-blend-mode: saturation;
}
.head12{
mix-blend-mode: exclusion;
}
.head13{
mix-blend-mode: darken;
}
.head14{
mix-blend-mode: lighten;
}
.head15{
mix-blend-mode: luminosity;
}
#box2{
margin-top:50px;
width:30vw;
height:30vh;
border: 4px solid black;
align-content: center;
}
.first{
color:red;
font-size:8vw;
font-size:8vh;
display:flex;
justify-content: center;
position:relative;
top: 60px;
}
.second{
margin-top:10px;
color:orange;
font-size:8vw;
font-size:8vh;
mix-blend-mode:difference;
display:flex;
justify-content: center;
}
</style>
<title></title>
</head>
<body>
<h1>CSS - MIX BLEND MODE</h1>
<br>
<h1>You can use it between image and text:</h1>
<div id="box"><h2 class="head">Normal(Default)</h2></div>
<div id="box"><h2 class="head1">Screen</h2></div>
<div id="box"><h2 class="head2">Overlay</h2></div>
<div id="box"><h2 class="head3">Multiply</h2></div>
<div id="box"><h2 class="head4">Color-dodge</h2></div>
<div id="box"><h2 class="head5">Difference</h2></div>
<div id="box"><h2 class="head6">hue</h2></div>
<div id="box"><h2 class="head7">Color</h2></div>
<div id="box"><h2 class="head8">Color-burn</h2></div>
<div id="box"><h2 class="head9">Hard-light</h2></div>
<h1>You can use it between image and image (value used = overlay) :</h1>
<div id="box"><div class="imag"></div></div>
<h1>You can use it between image and color (value used = saturation) :</h1>
<div id="box"><div class="colo"></div></div>
<div id="box"><h2 class="head10">Soft-light</h2></div>
<div id="box"><h2 class="head11">Saturation</h2></div>
<div id="box"><h2 class="head12">Exclusion</h2></div>
<div id="box"><h2 class="head13">Darken</h2></div>
<div id="box"><h2 class="head14">Lighten</h2></div>
<div id="box"><h2 class="head15">Luminosity</h2></div>
<h1>You can use it between text and text (value used = difference) :</h1>
<div id="box2"> <h2 class="first">Text</h2>
<h2 class="second">Text</h2></div>
<br>
</body>
</html>
Comments
Post a Comment