![]() ![]() However, the gradient itself has no intrinsic dimensions.Ī radial gradient is defined by its center, ending shape, and color stops. In a radial gradient, rather than colors smoothly fading from one side of the element to the other as with linear gradients, they instead emerge from a single point and smoothly spread outward in a circular or elliptical shape.Īn example of a radial gradient fading from yellow to green and then to purple.Ī gradient is drawn into a box with the dimensions of the concrete object size, referred to as the gradient box. ![]() A is an that is made of two or more colors that smoothly fade from one color to another. The following table provided by shows the level of browser support for this feature.The radial-gradient() function is used to create a. It's also being further defined in CSS Image Values and Replaced Content Module Level 4 (Editor’s Draft).The radial-gradient() function is defined in CSS Image Values and Replaced Content Module Level 3 (W3C Candidate Recommendation 17 April 2012).length A length value to define the placement of the color stop. percentage A percentage value to define the placement of the color stop. color-stop Valid values for color stops:Ĭolor A valid color value. centerĬomputes to 50% ( left 50%) for the horizontal position if the horizontal position is not otherwise specified, or 50% ( top 50%) for the vertical position if it is. left Computes to 0% for the horizontal position if one or two values are given, otherwise specifies the left edge as the origin for the next offset. bottom Computes to 100% for the vertical position if one or two values are given, otherwise specifies the bottom edge as the origin for the next offset. right Computes to 100% for the horizontal position if one or two values are given, otherwise specifies the right edge as the origin for the next offset. top Computes to 0% for the vertical position if one or two values are given, otherwise specifies the top edge as the origin for the next offset. percentage Specifies a percentage value as the offset. For example, 10px 20px will position the gradient 10 pixels from the left and 20 pixels from the upper left corner of the background positioning area. ![]() The following values are valid: length Gives a fixed length as the offset. Specifies where the center of the gradient should be located. Percentage values are only allowed on ellipses - not circles. Percentages values are relative to the corresponding dimension of the gradient box. The first value represents the horizontal radius, the second the vertical radius. Percentage values are not allowed on circles. If the shape is an ellipse, the ending shape is given the same aspect ratio it would have if farthest-side were specified. Same as closest-corner, except the ending shape is sized based on the farthest corner. If the shape is an ellipse, the ending shape is given the same aspect-ratio it would have if closest-side were specified. closest-corner The ending shape is sized so that that it passes through the corner of the gradient box closest to the gradient's center. farthest-side Same as closest-side, except the ending shape is sized based on the farthest side(s). If the shape is an ellipse, it exactly meets the closest side in each dimension. The following values are valid:Ĭlosest-side The ending shape is sized so that that it exactly meets the side of the gradient box closest to the gradient's center. size Specifies the size of the ending shape. The default value is circle if the is a single length, and ellipse otherwise. As indicated in the official syntax, the radial-gradient() function accepts the following values: shape ![]()
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |