The gradient's ending shape is sized so it exactly meets the farthest corner of the box from its center.Įarly drafts included other keywords ( cover and contain) as synonyms of the standard farthest-corner and closest-side respectively. Similar to closest-side, except the ending shape is sized to meet the side of the box farthest from its center (or vertical and horizontal sides). The gradient's ending shape is sized so it exactly meets the closest corner of the box from its center. The gradient's ending shape meets the side of the box closest to its center (for circles) or meets both the vertical and horizontal sides closest to the center (for ellipses). Keywords describing how big the ending shape must be. Percentage values in-between are linearly positioned on the gradient ray. A percentage of 0%, or a length of 0, represents the center of the gradient, the value 100% of the intersection of the ending shape with the virtual gradient ray. Representing a fixed color at a precise position, this value is composed by a value, followed by an optional stop position (either a or a along the virtual gradient ray). This is one of circle (meaning that the gradient's shape is a circle with constant radius) or ellipse (meaning that the shape is an axis-aligned ellipse). Radial-gradient ( …,, ) Values A, interpreted in the same way as background-position or transform-origin. Definition of the position of the shape Radial-gradient( ellipse x-axis y-axis, … ) /* The two semi-major axes are given, horizontal, then vertical */ Radial-gradient( circle radius, … ) /* A centered circle of the given length. Radial-gradient(, … ) /* It draws a circle */ Radial-gradient( ellipse, … ) /* Synonym of radial-gradient( ellipse farthest-corner, … ) */ Radial-gradient( circle, … ) /* Synonym of radial-gradient( circle farthest-corner, … ) */
For such a functionality, use the CSS repeating-radial-gradient() function. The radial-gradient function does not allow repeating gradients. Its concrete size will match the one of the element it applies to. To create a radial gradient you must define at least two colors, and their value can be any type of color format (e.g. it has no natural or preferred size, nor ratio. CSS Radial Gradients What is a Radial Gradient Probably the second most common type of gradient, the radial-gradient(). Like any other gradient, a CSS radial gradient is not a CSS but an image with no intrinsic dimensions, i. Each shape is monocolor and defined by the color on the gradient ray it intersects.Įnding shapes can only be circle or ellipse. Percentages positioning of color stops are relative to the intersection between the ending shape and this gradient ray representing 100%. Color stops are positioned on a virtual gradient ray going out horizontally of the center to the right. The radial gradient consists, going from its center to its ending shape and potentially beyond, of successive uniformly-scaled concentric shapes, identical to the ending shape.
Radial gradients are defined by their center, the ending shape contour and position, and color stops. With a tiny bit of Javascript we can detect if there is no support: if(!("backgroundBlendMode" in CSS radial-gradient() function creates an which represents a gradient of colors radiating from an origin, the center of the gradient- The result of this function is an object of the CSS data type. The downside to background-blend-mode along with many very new CSS properties is the added work in providing a good looking alternative for browsers with no support for the property. With performance considerations in mind, animations and transitions are possible through the background-size or background-position properties. With the new background-blend-mode property, the possibilities expand once more.ĬSS gradients are completely resolution-independent and faster to modify than images. The property is coming to Safari soon but not available in Internet Explorer.ĬSS gradients are already immensely powerful in creating patterns, as shown in Lea Verou's CSS Patterns Gallery.
It is very new and is curently supported by the latest releases of Chrome, Firefox, and Opera. The CSS background-blend-mode property blends the backgrounds of an element: colors, images, and gradients, together with Photoshop-like blend modes (multiply, screen, overlay, etc).
0 kommentar(er)
