What are 10 examples of transparent

Use of CSS gradients

CSS gradients are new types of added by the CSS3 Image Module. The use of CSS color gradients allows smooth transitions between two or more specified colors to be displayed. This makes it possible to avoid images for these effects, which reduces download time and bandwidth usage. In addition, objects look better when zoomed in, as the gradient is created by the browser, so the layout can be made much more flexible.

Browsers support two types of gradients: linear, defined by the function, and radial, defined by (en-US).

Linear gradients

To create a linear color gradient, a starting point is set and a direction (as an angle) along which the gradient effect is applied. There will be too Color stops Are defined. Color stops are the colors between which Gecko should create smooth transitions. At least two must be specified, but several can be defined to create more complex gradient effects.

Simple linear gradients

Here is a linear gradient that starts in the middle (horizontal) at the top (vertical) with blue and turns into white.

ScreenshotLive demo

(See the browser compatibility table for an overview of the prefixes required to support different browser versions).

The same gradient is changed to go from left to right:

ScreenshotLive demo

(See the browser compatibility table for an overview of the prefixes required to support different browser versions).

The course can be designed diagonally by defining the horizontal and vertical starting position. For example:

ScreenshotLive demo

Use of angles

If no angle is specified, it is automatically determined by the specified direction. If more control over the direction of the gradient is desired, the angle can be specified explicitly.

As an example here are two gradients, the first with a direction to the right and the second with an angle of 70 degrees.

The right one uses CSS like this:

The angle is specified as the counterclockwise angle between the horizontal line and the gradient line. In other words, creates a vertical gradient from bottom to top, while creates a horizontal gradient from left to right:

Note: Multiple browsers implement (prefixed) an older draft specification that pointed to the right rather than up. Therefore, attention should be paid to the value of the angle when the standardized and prefixed are used mixed. A simple formula for this is 90 - x = y, where x is the standard usage and y is the non-standardized usage with a manufacturer prefix.

Color stops

Color stops are points along the gradient line that indicate a specific color at that location. The position can be specified either as a percentage of the length of the line or as an absolute length. Any number of color stops can be defined to achieve the desired effect.

If the position is given as a percentage, it represents the start point and the end point; however, values ​​outside this range can be used if necessary to obtain the desired effect.

Example: three color stops

This example defines three color stops:

ScreenshotLive demo

Note that the first and last color stops do not define a position; therefore they are automatically assigned values ​​of 0% and 100%. The middle color stop defines a position of 80%, which moves it down quite a bit.

Example: Evenly distributed color stops

Here is an example using a variety of colors, all evenly spaced:

ScreenshotLive demo

Note that the color stops are automatically distributed evenly if no positions are specified.

Transparency and gradients

Gradients support transparency. This can be used, for example, to superimpose several backgrounds to create fading effects on background images. To achieve this, either colors, colors or the keyword can be used (see color values). However, it should be noted that some browsers render the keyword as instead of, which can lead to unexpected results (and potentially dark spots) if the gradients cross-fade. Therefore, it is safer to define opaque gradients.

Here is an example of how transparency is used in gradients:

The backgrounds are overlaid with the first background on top and each additional background below. By overlaying backgrounds in this way, creative effects can be created, as seen above.

Radial gradients

Radial color gradients are defined by the (en-US) function. The syntax is similar to that of linear gradients, except that the final shape (whether circle or ellipse) of the gradient can be specified, as well as its size. By default, the end shape is an ellipse with the same proportions as the container box.

Color stops

Color stops can be specified in the same way as for linear gradients. The course line runs from the starting position in all directions.

Example: Evenly distributed color stops

By default, color stops are evenly distributed as with linear gradients:

ScreenshotLive demo

Example: Explicitly distributed color stops

Certain positions for the color stops are defined here:

ScreenshotLive demo

size

This is one of the areas in which radial gradients differ from linear gradients. A size value can be specified that defines the point that determines the size of the circle or ellipse. See the description of the size constants (en-US) for details.

Example: for ellipses

This ellipse uses the size value, which means that the size is determined by the distance between the starting point (the center) and the closest side of the enclosed box.

ScreenshotLive demo

Example: for ellipses

This example is similar to the previous one, with the difference that the size of the ellipse is determined by, which determines the size of the gradient by the distance between the starting point and the corner of the enclosed box furthest away from the starting point.

ScreenshotLive demo

Example: for circles

Used this example, which defines the size of the circle as the distance between the starting point and the closest side.

ScreenshotLive demo

Here the radius of the circle is half the height of the box, since the top and bottom edges are equidistant from the starting point and are closer than the left and right edges.

Repetition of color gradients

The and (en-US) properties do not automatically support the repetition of color stops. However, the properties (en-US) and (en-US) are available for this functionality.

Examples: Repeating linear gradient

This example uses (en-US) to create a gradient:

ScreenshotLive demo

Another example that uses the (en-US) property.

Example: repeating radial gradient

This example uses (en-US) to create a gradient:

ScreenshotLive demo

See also