CSS gradients [ Using linear gradient CSAS]

CSS gradients are represented by <gradient>data types, special types <image>made up of progressive transitions between two or more colors. You can choose between three types of gradients: linear (created with a linear-gradient()function), radial (created with a radial-gradient()function), and conical (created with a conic-gradient()function). You can also create repeating gradients with the repeating-linear-gradient(), repeating-radial-gradient(), and repeating-conic-gradient()functions.

Gradients can be used anywhere you would use <image>, such as in the background. Since gradients are dynamically generated, they can eliminate the need for raster image files that are traditionally used to achieve a similar effect. Also, because gradients are generated by the browser, they look better than raster images when zoomed in, and can be resized quickly.

We'll start by introducing linear gradients, then introduce features that are supported across all gradient types using linear gradients as an example, then move on to radial, conical, and repeating gradients.

Using linear gradient

Linear gradients create bands of color that develop in straight lines.

READ ALSO ARTICLE:

Basic linear gradient

To create the most basic type of gradient, all you need is to specify two colors. This is called color stopping . You must have at least two, but you can have as many as you want.

.simple-linear { background : linear-gradient (blue, pink) ; }

READ ALSO ARTICLE:

Change direction

Diagonal gradient

You can even make the gradient run diagonally, from corner to corner.

Using angle

If you want more control over the direction, you can give it a certain angle gradient.

When using corners, 0degcreate a vertical gradient from bottom to top, 90degcreate a horizontal gradient from left to right, and so on in a clockwise direction. Negative angles run in a counterclockwise direction.

Declaring colors & creating effects

All CSS gradient types are position-dependent color ranges. The colors produced by CSS gradients can vary continuously with position, resulting in smooth color transitions. It is also possible to create solid color bands, and hard transitions between two colors. The following applies to all gradient functions:

Using more than two colors

Color positioning stops

You don't have to leave your color stop at its default position. To fine-tune the location, you can give either zero, one, or two percentages or, for radial and linear gradients, an absolute length value, respectively. If you specify the location as a percentage, it 0%represents the starting point, while 100%representing the end point; however, you can use values ​​outside that range if necessary to get the effect you want. If you leave an unspecified location, the position of the specific color stop will be calculated automatically for you, with the first color stop at 0%and the last color stop at 100%, and the other color stops halfway between adjacent color stops.

Make a hard line

To create a solid line between two colors, creating a line instead of a gradual transition, adjacent color stops can be set to the same location. In this example, the colors share a color stop on the 50%sign, in the middle of the gradient:

Gradient hint

By default, the gradient transitions evenly from one color to the next. You can include color hints to move the midpoint of the transition value to a specific point along the gradient. In this example, we've moved the midpoint of the transition from the 50% mark to the 10% mark.

Making color ribbons & stripes

To include areas of solid, non-transition color in the gradient, include two positions for color stops. A color stop can have two positions, which is equivalent to two consecutive color stops of the same color at different positions. The color will reach full saturation at the first color stop, maintain that saturation until the second color stop, and transition to the adjacent color stop through the first position of the adjacent color stop.

In the first example above, the chalk goes from the 0% mark, which is implied, to the 20% mark, transitions from chalk to red over the next 10% of the gradient width, reaches deep red at the 30% mark, and stays solid red up to 45% through gradient, where it fades to cyan, to completely cyan for a 15% gradient, and so on.

In the second example, the second color stop for each color is in the same location as the first color stop for the adjacent color, creating a striped effect.

In both examples, the gradient is written twice: the first is the CSS Images Level 3 method which repeats the color for each stop and the second example is the CSS Image Level 4 multi-color stop method which includes two lengths of color stops in a linear-color-stop declaration. .

Control gradient progression

By default, the gradient evenly develops between the colors of two adjacent color stops, with the midpoint between the two color stops being the midpoint color value. You can control the interpolation, or progression, between two color stops by including the location of color clues. In this example, the color reaches a point midway between chalk and cyan 20% of the way through the gradient rather than 50% of the way through. The second example does not contain a hint to highlight the difference a color hint can make:

Gradient layering

Stacked gradients

Using a radial gradient

Radial gradients are similar to linear gradients, except that they radiate outward from a central point. You can determine where the center point is. You can also make it circular or elliptical.

Basic radial gradient

Positioning the radial color stop

Again like linear gradients, you can position each radial color stop with a percentage or absolute length.

Positioning the center of the gradient

You can position the center of the gradient with keywords, percentages, or absolute length, length, and percentage values ​​that repeat if only one is present, otherwise in order of position from left and position from top.

READ ALSO ARTICLE:

Measuring radial gradient

Unlike linear gradients, you can specify the size of the radial gradient. Possible values ​​include closest-corner, closest-side, farthest-corner, and farthest-side, farthest-cornerbeing the default. Circles can also be measured by length, and ellipse length or percentage.

Example: nearest side to ellipse

This example uses closest-sidesize values , which means the size is determined by the distance from the starting point (middle) to the nearest side of the closing box.

Example: farthest angle for an ellipse

This example is similar to the previous one, except that the size is specified as farthest-corner, which sets the gradient size with the distance from the starting point to the furthest corner of the closing box from the starting point.

Example: nearest side to circle

This example uses closest-side, which makes the circle size the distance between the starting point (center) and the nearest edge. The radius of the circle is the distance between the center of the gradient and the nearest edge, which, due to the placement of 25% from the top and 25% from the bottom, is closest to the bottom, because the height in this case is narrower than the width.

Example: length or percentage for ellipse

For ellipses only, you can measure the ellipse using length or percentage. The first value represents the horizontal radius, the second the vertical radius, where you use this percentage according to the size of the box in that dimension. In the example below I've used a percentage for the horizontal radius.

Example: circle length

For circles the size can be given as <length> , which is the size of the circle.

Stacked radial gradient

Just like linear gradients, you can also stack radial gradients. The former is defined above, the latter below.

Using a conical gradient

The CSS function creates an image consisting of gradients with color transitions that rotate around a center point (rather than radiating from the center). Examples of conical gradients include pie charts and color wheels, but they can also be used to create chessboards and other interesting effects.conic-gradient()

Cone gradient syntax is similar to radial gradient syntax, but color stops are placed around the gradient arc, around the circle, not on gradient lines emerging from the gradient center, and color stops are either percentages or degrees: invalid absolute length.

In a radial gradient, the color transitions from the center of the ellipse, outwards, in all directions. With a conical gradient, the color transitions seem to revolve around the center of the circle, starting at the top and clockwise. Similar to a radial gradient, you can position the center of the gradient. Similar to linear gradients, you can change the angle of the gradient.

Basic cone gradient

As with linear and radial gradients, all you need to create a conical gradient is two colors. By default, the center of the gradient is at the 50% 50% mark, with the start of the gradient facing up:

.simple-conic { background : conic-gradient (red, blue) ; }

Positioning the center of the cone

As with radial gradients, you can position the center of the cone gradient by key terms, percentages, or absolute length, with the keyword "at"

Changing angle

By default, the stops of different colors that you specify are equally spaced around the circle. You can position the starting angle of the cone gradient using the keyword “from” at the beginning followed by angle or length, and you can specify a different position for the stop color by including the angle or length after it.

Using repeating gradients

The linear-gradient(), radial-gradient(), and functions conic-gradient()do not support auto-repeating color stops. However, repeating-linear-gradient(), repeating-radial-gradient(), and repeating-conic-gradient()functions are available to offer this function.

The size of the repeating gradient line or arc is the length between the first color stop value and the last color stop length value. If the first color stop has only a color and no color stop length, the value defaults to 0. If the last color stop has only a color and no color stop length, the value defaults to 100%. If neither is stated, then the gradient line is 100% meaning that the linear gradient and conical gradient will not repeat and the radial gradient will only repeat if the gradient radius is less than the length between the gradient center and the furthest corner. If the first color stop is declared, and the value is greater than 0, the gradient will repeat itself,

This example is used repeating-linear-gradient()to create a gradient that expands repeatedly in a straight line. Colors are recycled again as the gradient repeats. In this case the gradient line is 10px long.

Multiple repeating linear gradients

Similar to regular linear and radial gradients, you can insert multiple gradients, one on top of the other. This only makes sense if the partially transparent gradient allows subsequent gradients to be shown through the transparent area, or if you include a different background size, optionally with a different background position property value, for each gradient image. We use transparency.

In this case the gradient lines are 300px, 230px, and 300px long.

Checkered gradient

To create a checkerboard, we included several gradients that overlapped the transparency. In the first background declaration, we listed each color stop separately. The second background property declaration uses the multiple position color stop syntax:

Repeated radial gradient

This example is used repeating-radial-gradient()to create a gradient that radiates repeatedly from a central point. The colors will cycle over and over as the gradient repeats itself.

Multiple repeating radial gradients

READ ALSO ARTICLE:

DONATION VIA FUND Help make a donation if the article is useful. Donations will be used to extend the https://www.alhikmah.my.id/ domain . Thank you.

Old Post Old Post

Originally published at https://www.alhikmah.my.id.