<html>
<head>
<style>
#grad1{ background:linear-gradient(red,yellow);
}
#grad2{ height:100px;
background:linear-gradient(to right, red, yellow);
}
#grad3{ background:linear-gradient(-90deg, red, yellow);
}
#grad4{
height:100px;
background:linear-gradient(red, orange, yellow, green, blue, indigo, violet);
}
#grad5{
background:linear-gradient(to right,red,orange,yellow,green,blue,indigo,violet);
}
#grad6{
height:100px;
background:linear-gradient(to right,rgba(255,0,0,0),rgba(255,0,0,1));
}
#grad7{
height:100px;
background:repeating-linear-gradient(190deg,red,yellow7%,green10%);
}
#grad8{
height:150px;
background:radial-gradient(circle,red,yellow,green);
}
#grad9{
height: 150px;
background:repeating-radial-gradient(red,yellow10%,green15%);
}
#p1 {background-color:rgba(255,0,0,0.3);}
#p2 {background-color:rgba(0,255,0,0.3);}
#p3 {background-color:rgba(0,0,255,0.3);}
#p7 {background-color:hsl(120%,100%,50%);}
#p8 {background-color:hsl(120%,100%,75%);}
#p9 {background-color:hsl(120%,100%,25%);}
#p10 {background-color:hsl(120%,60%,75%);}
#p13 {background-color:hsla(120%,100%,50%,0.8);}
#p14 {background-color:hsla(120%,100%,75%,0.8);}
#p15 {background-color:hsla(120%,100%,25%,0.8);}
#p16 {background-color:rgb(255,0,0);opacity:0.8;}
#p17 {background-color:rgb(0,255,0);opacity:0.8;}
#p18 {background-color:rgb(0,0,255);opacity:0.8;}
</style>
</head>
<body>
<div id="grad1">hii</div>
<h3 style="background-color:#ff0000;">RGB</h3>
<p id="p1">Red</p>
<p id="p2">Green</p>
<p id="p3">Blue</p>
xx<div id="grad2" style="text-align:center;">Hey dude</div>
<div id="grad3">
<h3 style="background-color:purple">Define Colors With HSL Values</h3>
xx<p id="p7">Green</p>
xx<p id="p8">Light green</p>
xx<p id="p9">Dark green</p>
xx<p id="p10">Pastel green</p>
</div>
<div id="grad4" style="text-align:center;">Hey There How are you!!</div>
<div id="grad5">
<h3>Define colors with HSLA Values</h3>
<h2 style="background-color:#0000ff;">Hello Word!!</h2>
xx<p id="p13">Green</p>
xx<p id="p14">Light green</p>
xx<p id="p15">Dark green </p>
</div>
<div id="grad6"> </div>
xx<div id="grad7"> Hello</div>
<div id="grad8"> </div>
<div id="grad9">
xx<h3 style="background-colo:#ff00ff;"> cool colors of html</h3>
<p id="p16">Red</p>
<p id=p17">Green</p>
<p id="p18">Blue</p>
</div>
</body>
</html>
<head>
<style>
#grad1{ background:linear-gradient(red,yellow);
}
#grad2{ height:100px;
background:linear-gradient(to right, red, yellow);
}
#grad3{ background:linear-gradient(-90deg, red, yellow);
}
#grad4{
height:100px;
background:linear-gradient(red, orange, yellow, green, blue, indigo, violet);
}
#grad5{
background:linear-gradient(to right,red,orange,yellow,green,blue,indigo,violet);
}
#grad6{
height:100px;
background:linear-gradient(to right,rgba(255,0,0,0),rgba(255,0,0,1));
}
#grad7{
height:100px;
background:repeating-linear-gradient(190deg,red,yellow7%,green10%);
}
#grad8{
height:150px;
background:radial-gradient(circle,red,yellow,green);
}
#grad9{
height: 150px;
background:repeating-radial-gradient(red,yellow10%,green15%);
}
#p1 {background-color:rgba(255,0,0,0.3);}
#p2 {background-color:rgba(0,255,0,0.3);}
#p3 {background-color:rgba(0,0,255,0.3);}
#p7 {background-color:hsl(120%,100%,50%);}
#p8 {background-color:hsl(120%,100%,75%);}
#p9 {background-color:hsl(120%,100%,25%);}
#p10 {background-color:hsl(120%,60%,75%);}
#p13 {background-color:hsla(120%,100%,50%,0.8);}
#p14 {background-color:hsla(120%,100%,75%,0.8);}
#p15 {background-color:hsla(120%,100%,25%,0.8);}
#p16 {background-color:rgb(255,0,0);opacity:0.8;}
#p17 {background-color:rgb(0,255,0);opacity:0.8;}
#p18 {background-color:rgb(0,0,255);opacity:0.8;}
</style>
</head>
<body>
<div id="grad1">hii</div>
<h3 style="background-color:#ff0000;">RGB</h3>
<p id="p1">Red</p>
<p id="p2">Green</p>
<p id="p3">Blue</p>
xx<div id="grad2" style="text-align:center;">Hey dude</div>
<div id="grad3">
<h3 style="background-color:purple">Define Colors With HSL Values</h3>
xx<p id="p7">Green</p>
xx<p id="p8">Light green</p>
xx<p id="p9">Dark green</p>
xx<p id="p10">Pastel green</p>
</div>
<div id="grad4" style="text-align:center;">Hey There How are you!!</div>
<div id="grad5">
<h3>Define colors with HSLA Values</h3>
<h2 style="background-color:#0000ff;">Hello Word!!</h2>
xx<p id="p13">Green</p>
xx<p id="p14">Light green</p>
xx<p id="p15">Dark green </p>
</div>
<div id="grad6"> </div>
xx<div id="grad7"> Hello</div>
<div id="grad8"> </div>
<div id="grad9">
xx<h3 style="background-colo:#ff00ff;"> cool colors of html</h3>
<p id="p16">Red</p>
<p id=p17">Green</p>
<p id="p18">Blue</p>
</div>
</body>
</html>
No comments:
Post a Comment