CSS3

CSS3 web page gradient background color effect design

Kevin Li
by Kevin Li 9:10 PM


 The gradient background color effect of web pages is a technique often used by web designers. Traditional web design must use gradient images as web page background images to show the effect of web page gradient background colors. However, CSS3 has a new The Gradients gradient effect function, through this Gradients setting, you can easily make the browser automatically present a gradient background effect for the web page. This visual effect can be achieved without preparing a gradient image, and you can also set the gradient The color and direction to be presented, the color can be set to change in multiple different colors, the direction can also be set to extend up, down, left, and right, and to be presented through an angle. It can even be designed as a radial gradient effect, which is very powerful.


Gradients gradient effect function syntax of CSS3
Linear gradient syntax: background: linear-gradient(direction, color 1, color 2, ...);
radial gradient syntax: background: radial-gradient(ellipse or circle, color 1, color 2,. .....);
CSS3 the Gradients gradient effect is directly applied to a feature in background feature attribute two differences we introduce in this way that the gradient of the prefix as gradient, linear gradient is Linear, the radial gradient of the prefix is In addition, in order to obtain the best browser support effect, we will add the browser prefix to the top of the gradient to let the browser know that we want to display the function of the gradient. These prefixes are organized as follows.

Browser applicable prefix
  • Google Chrome and Apple Safari use -webkit-
  • Mozilla FireFox uses -moz-
  • Opera uses -o-
Let's apply the above grammatical concepts to the examples to see the effect of the design!

CSS3 webpage gradient background color effect design example 1. Linear gradient
<style type="text/css">
body {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#container{
height:1000px;
margin-top:0px;
background: -webkit-linear-gradient(yellow,red);
background: -o-linear-gradient(yellow,red);
background: -moz-linear-gradient(yellow,red);
background: linear-gradient(yellow, red);
}
</style>
<body>
    <div id="container">
        ...website content...
    </div>
</body>
The effect of the example
Webpage linear gradient background color picture 1
The HTML page in the example has two structures, one of which is the body tag of the page itself , with a DIV block named container in the middle . The purpose of this design is to use the width and height of the container block to fill the whole pages more flexible, if pure in body tag set CSS3 of gradients gradient effect, will result when the page content is too long, exceeds a preset body tag height, excess amount will not have gradient background color, so We did not fix a height in the body tag , but set the height in the container block, and adjust the color range of the gradient background to be displayed according to the content of the webpage.

You can see in the example that the gradient background color of this webpage develops from top to bottom, from the first color yellow (yellow) to red (yellow), you can also set more different colors, adjust the gradient For more changes, please refer to the detailed introduction of " CSS3 Gradients ".

CSS3 webpage gradient background color effect design example 2: radial gradient
<style type="text/css">
body {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#container{
height:500px;
background: -webkit-radial -gradient(circle,white,orange);
background: -o-radial-gradient(circle,white,orange);
background: -moz-radial-gradient(circle,white,orange);
background: radial-gradient(circle, white,orange);
}
</style>
<body>
    <div id="container">
        ...website content...
    </div>
</body>
The effect of the example
Webpage linear gradient background color picture 2
The second example shows the radial gradient in the gradient effect function of CSS3 Gradients . The color we designed is white (white) to orange (orange), and the default effect is to start from the center to the outside. So you will see this effect like the example, the color can be selected by yourself, it is worth mentioning that the default radial gradient effect of CSS3 Gradients is elliptical, and the parameter is ellipse, which allows web designers to adjust to a perfect circle. , Just use the parameter circle, just like the example.

The above two examples show the CSS3 web page gradient background color effect design skills, in fact, Gradients is very powerful, you can make many subtle adjustments, for more detailed usage, please read the article " CSS3 Gradients Gradient Effects " The content is helpful for designing other changes.


Post a Comment

0 Comments