Hello friends in this blog post we will learn about web page development Describe about (CSS Gradients) (CLASS:9) computer engineering students Now lets start.
CSS GRADIENTS
→ Gradients display the combination of two or more colors.
→ The CSS gradient feature allows you to create a gradient from one color to an other without using any images.
→ The CSS gradient feature provides a flexible solution to generate smooth transitions between two or more colors.
→Types of gradients
. Linear Gradients
. Radial Gradients
. Gradients Property
. Background-Image
. Background
→Gradients values
. Linear Gradients
. Repeating-Linear-Gradients
. Radial-Gradients
. Repeating-radial-Gradients
Syntax:
background:method (values);
background-image:method (values);
Example:
background:linear-gradient (red,blue);
background-image:radial-gradient (red,green);
background:repeat-linear-gradient (red,blue);
HTML CODE
<!Doctype html>
<html>
<head>
<title>CSS Gradient</title>
<link rel="style sheet" type="text/css" href="gradient.css">
</head>
<body>
<p id="linear"></p>
<p id="linear 1"></p>
<p id="radial"></p>
<p id="radial 1"></p>
</body>
</html>
CSS CODE
p{
height :200px;
width :300px;
margin :10px;
float :left;
border :15px solid maroon;
}
#linear{background:linear-gradient(red,blue,yellow)}
#linear 1{background:linear-gradient(to right,red,blue,green)}
#radial{background:radial-gradient(yellow,red,blue)}
#radial 1{background:radial-gradient(circle,yellow,red,blue)}
The output of the above examples will look something like this:
 (WPD)){kind=link}
1 Comments
bohot badiya!!
ReplyDelete