A gradient, when referring to color, is when there is a gradual transition from one color to another. This can be a transition between two completely different colors, or it can even be a transition between two different levels of saturation of the same hue.
Achieving a gradient background in web design used to require an image. The most common approach was to take a 1px-thin image with the color gradient traveling along the longer dimension. This image could then use background-repeat along the x-axis or y-axis—whichever direction traveled perpendicular to the gradient. This was a nice effect with a small-sized image file, but it wouldn't allow you to do a gradient on a diagonal, or in a radial pattern.
CSS3, though, is capable of creating gradients all on its own. Using the background property, we can use linear-gradient or radial-gradient to create just about any gradient we want.
Linear-gradient is used for gradients that follow a line going in one direction. The main parts of a linear gradient are the direction it travels, and the colors that will be involved. At least two colors are required to make a gradient, of course, but it can include as many as you would like. The directions can be determined with direction words preceded by the word "to", indicating that the direction you pick is the one the gradient is traveling toward. If you use the words "to right", the colors used will appear in your gradient from left to right. If you use the words "to bottom left", the colors will travel from the upper right corner down toward the lower left corner. Degrees of an angle can also be used by using the number value followed by the letters "deg"—for example, "-90deg".
|
<style> |
Radial gradients, gradients that travel outward in all directions from its source, work in a similar fashion. But since radial gradients don't follow one direction, direction keywords or an angle aren't used for the initial value. Your colors listed will go in order from the source of the gradient toward its outer edge.
|
<style> |
By default, the colors in your gradient will evenly distribute. However, you can have more control about where each one starts by placing a space followed by a percentage next to a color. This location in a gradient where a color begins is referred to as a color stop.
Also, if you have a brief gradient that you want to use over and over again, don't worry, you don't have to repeat your listing over color stops over and over. In these cases, you can put the word "repeating" in front of your gradient type: repeating-linear-gradient or repeating-radial-gradient.
|
<style> |
