This one is self-explanatory. You can define the linear gradient angle in the code with a keyword or number and unit. With a keyword, you would use variations of to bottom, to top, to left, and to right to determine where the line should move to from the starting point.
These directional keywords can be combined-like to top right or to bottom left-to create a diagonal line. You could also use number and unit pairings to determine the angle and direction of the line.
In the most basic version of a CSS gradients, you'll need is at least two colors for the gradient to transition between. These are typically referred to as color-stops since, generally, they tell the code at which points each color should stop along the text gradient. Again like linear gradients, you can position each radial color stop with a percentage or absolute length. You can position the center of the gradient with keyterms, percentage, or absolute lengths, length and percentage values repeating if only one is present, otherwise in the order of position from the left and position from the top.
Unlike linear gradients, you can specify the size of radial gradients. Possible values include closest-corner , closest-side , farthest-corner , and farthest-side , with farthest-corner being the default. Circles can also be sized with a length, and ellipses a length or percentage. This example uses the closest-side size value, which means the size is set by the distance from the starting point the center to the closest side of the enclosing box.
This example is similar to the previous one, except that its size is specified as farthest-corner , which sets the size of the gradient by the distance from the starting point to the farthest corner of the enclosing box from the starting point.
This example uses closest-side , which makes the circle's size to be the distance between the starting point the center and the closest side. For ellipses only, you can size the ellipse using a length or percentage. The first value represents the horizontal radius, the second the vertical radius, where you use a percentage this corresponds to the size of the box in that dimension. In the below example I have used a percentage for the horizontal radius.
Just like linear gradients, you can also stack radial gradients. The first specified is on top, the last on the bottom. The conic-gradient CSS function creates an image consisting of a gradient with color transitions rotated around a center point rather than radiating from the center.
Example conic gradients include pie charts and color wheels, but they can also be used for creating checker boards and other interesting effects. The conic-gradient syntax is similar to the radial-gradient syntax, but the color-stops are placed around a gradient arc, the circumference of a circle, rather than on the gradient line emerging from the center of the gradient, and the color-stops are percentages or degrees: absolute lengths are not valid.
In a radial gradient, the colors transition from the center of an ellipse, outward, in all directions. With conic gradients, the colors transition as if spun around the center of a circle, starting at the top and going clockwise. Similar to radial gradients, you can position the center of the gradient. Similar to linear gradients, you can change the gradient angle. As with linear and radial gradients, all you need to create a conic gradient are two colors.
Like radial gradients, you can position the center of the conic gradient with keyterms, percentage, or absolute lengths, with the keyword "at". By default, the different color stops you specify are spaced equidistantly around the circle.
You can position the starting angle of the conic gradient using the "from" keyword at the beginning followed by an angle or a length, and you can specify different positions for the colors stops by including an angle or length after them. The linear-gradient , radial-gradient , and conic-gradient functions don't support automatically repeated color stops. However, the repeating-linear-gradient , repeating-radial-gradient , and repeating-conic-gradient functions are available to offer this functionality.
The size of the gradient line or arc that repeats is the length between the first color stop value and the last color stop length value.
It starts red, transitioning to yellow:. The following example shows a linear gradient that starts from the left.
You can make a gradient diagonally by specifying both the horizontal and vertical starting positions. The following example shows a linear gradient that starts at top left and goes to bottom right. If you want more control over the direction of the gradient, you can define an angle, instead of the predefined directions to bottom, to top, to right, to left, to bottom right, etc.
A value of 0deg is equivalent to "to top". A value of 90deg is equivalent to "to right". A value of deg is equivalent to "to bottom". The following example shows how to create a linear gradient from left to right with the color of the rainbow and some text:.
To add transparency, we use the rgba function to define the color stops. The last parameter in the rgba function can be a value from 0 to 1, and it defines the transparency of the color: 0 indicates full transparency, 1 indicates full color no transparency.
0コメント