<!
-- CSS Gradients -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Attribute Selectors</title>
<style>
#linear
{
background-image: linear-gradient(orange,white,green);
width: 200px;
height:250px;
}
#radial
{
background-image: radial-gradient(green,red,black);
width: 200px;
height:250px;
}
#conic
{
background-image: conic-gradient(black,yellow);
width: 200px;
height:250px;
}
</style>
</head>
<body>
<h1> Linear Gradients</h1>
<div id="linear">
Linear Gradients
</div>
<h1> Radial Gradients</h1>
<div id="radial">
Radial Gradients
</div>
<h1>Conic Gradients</h1>
<div id="conic">
Conic Gradients
</div>
</body>
</html>
<!-- CSS Liner Gradient -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Liner Gradient</title>
<style>
#ttb
{
background-image: linear-gradient(red,black);
width:200px;
height: 150px;
}
#ltr
{
background-image: linear-gradient(to right,yellow,green);
width:200px;
height: 150px;
}
#tlbr
{
background-image: linear-gradient(to bottom right,blue,orange);
width:200px;
height: 150px;
}
#repeat{
background-image: repeating-linear-gradient(orange,white 10%,green);
width:200px;
height: 150px;
}
</style>
</head>
<body>
<h1> LINEAR GRADIENTS DIRECTION</h1>
<div id="ttb">
Top to Bottom (default)
</div>
<h1><u>Left to Right</u> </h1>
<div id="ltr">
Left to rigth
</div>
<h1> TOP LEFT TO BOTTOM RIGHT</h1>
<div id="tlbr">
top left to bottom right
</div>
<h1>Repeating a linear-gradient</h1>
<div id="repeat">
Repeating a linear-gradient
</div>
</body>
</html>
<!-- CSS Radial Gradients -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Radial Gradients</title>
<style>
#r1
{
background-image: radial-gradient(green,red);
width:250px;
height: 100px;
}
#r2{
background-image: radial-gradient(circle,black,blue);
width:250px;
height: 200px;
}
#r3
{
background-image: repeating-radial-gradient(red,green 10%,blue 20%);
width:250px;
height: 200px;
}
</style>
</head>
<body>
<h1>CSS Radial Gradients Directions</h1>
<h2> By default, shape is ellipse</h2>
<div id="r1">
By default, shape is ellipse
</div>
<h2> CIRCLE</h2>
<div id="r2">
Circle
</div>
<h2>Repeating a radial-gradient</h2>
<div id="r3">
Repeating a radial-gradient
</div>
</body>
</html>
<!-- CSS Conic Gradients -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Conic Gradients</title>
<style>
#c1
{
background-image: conic-gradient(red,green,blue);
width:250px;
height: 200px;
}
#c2
{
background-image: conic-gradient(red 45deg,yellow 90deg,green
200deg);
width:250px;
height: 200px;
}
#c3
{
background-image: conic-gradient(black,white,green,red,blue);
width:250px;
height: 200px;
border-radius: 75%;
}
#c4{
background-image: conic-gradient(red 0deg,red 90deg,yellow
90deg,yellow 180deg,green 180deg,green 270deg,blue);
width:250px;
height: 200px;
border-radius: 100%;
}
#c5
{
background-image: repeating-conic-gradient(orange,green 10%,blue
20%);
width:250px;
height: 200px;
border-radius: 50%;
}
</style>
</head>
<body>
<h1>CSS Conic Gradients </h1>
<h1> ZERO DEGREE</h1>
<div id="c1">
0 degree default value
</div>
<h2> Any degree</h2>
<div id="c2">
45 deg red,90 deg yellow and 200 degree green
</div>
<h2>Create Pie Charts</h2>
<div id="c3">
</div>
<h2> Conic Gradient - Pie Chart</h2>
<div id="c4">
</div>
<h2>Repeating a Conic Gradient</h2>
<div id="c5"></div>
</body>
</html>
<!-- CSS OVERFLOW -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS OVERFLOW</title>
</head>
<style>
div{
background-color: chocolate;
width: 320px;
height: 150px;
/* overflow: visible; */
/* overflow:hidden; */
/* overflow: auto; */
overflow: scroll;
}
</style>
<body>
<div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem, fuga
quia. Nihil esse, voluptas suscipit amet debitis ipsa mollitia architecto
voluptatum adipisci recusandae nesciunt tempora reprehenderit saepe commodi.
Molestiae, eum. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae
repellendus hic voluptas porro recusandae sit, nisi veniam tempora cupiditate aut
consequuntur provident ratione dolorum aperiam expedita animi ipsa. Ipsum,
reiciendis!
Minus ipsum natus iure incidunt rerum odio sapiente quas commodi vitae
harum? Dicta, quos! Veniam exercitationem officiis labore facere necessitatibus
omnis perferendis voluptatem molestias, sapiente ad repudiandae pariatur dolorum
at?</p>
</div>
</body>
</html>
