Scribd
Upload
7 views

CSS Gradients

The document contains multiple HTML examples demonstrating different types of CSS gradients, including linear, radial, and conic gradients, along with their respective styles and properties. Each section showcases various gradient configurations and directions, such as top to bottom, left to right, and repeating gradients. Additionally, there is a section on CSS overflow properties, illustrating how to manage content overflow within a div element.

Uploaded by

Candy Man
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

CSS Gradients

The document contains multiple HTML examples demonstrating different types of CSS gradients, including linear, radial, and conic gradients, along with their respective styles and properties. Each section showcases various gradient configurations and directions, such as top to bottom, left to right, and repeating gradients. Additionally, there is a section on CSS overflow properties, illustrating how to manage content overflow within a div element.

Uploaded by

Candy Man
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

<!

-- 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>

You might also like