General Information on CSS3 Gradients

This article deals with information regarding CSS3 gradients, what it is, browser support, and some useful keywords to remember.

Gradients are transitions beginning from one hue to a different one. They can be coded using Cascading Style Sheets 3. It can be rendered, through the background property, only when these are treated as background images.

Browser Support

The following web browsers support CSS3 gradients: Firefox 3.6, Safari 4, Opera 11.10, Chrome 1, Internet Explorer 10 and all their later versions. This extensive browser support coverage is convenient for code developers and users alike. Earlier browsers and those that do not support CSS3 gradients just utilize the image as an alternative.

General Description

Various CSS3 gradients can be designated by separated comma. Automatically, these smooth color transitions fill the entire background.

The initial position of the gradient denoting a straight line on which the color proceeds to the finish position is known. The background-position property’s general values are valid. In this circumstance, right denotes a gradient proceeding from right to the left, right top signifies a slanting gradient proceeding from the top right corner to the bottom left. It can also be angled by setting the -45deg runs from the top right curve to bottom left, 90deg points up and 0deg points to the left.

The initial gradient can also be improved by a discontinued stance to shift its point on the color axis. In discontinuing a color, the gradient doesn’t merely change starting from blue to red but is improved by a gradient stop of yellow in the center. If separated by commas, multiple gradient discontinuations are also possible. When your objective is to discontinue a certain position, you must know where the gradient stop is positioned on the color axis. In this particular scenario, green is set to be at 40% instead of 80%, while the length value is relative of preference. The last gradient can also be extended by a discontinuation point.

Example of a CSS3 code for linear gradients:

#linearBg2

{ /* fallback */

background-color: #1a82f7;

background: url(images/linear_bg_2.png);

background-repeat: repeat-x;

/* Safari 4-5, Chrome 1-9 */

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));

/* Safari 5.1, Chrome 10+ */

background: -webkit-linear-gradient(top, #2F2727, #1a82f7);

/* Firefox 3.6+ */

background: -moz-linear-gradient(top, #2F2727, #1a82f7);

/* IE 10 */

background: -ms-linear-gradient(top, #2F2727, #1a82f7);

/* Opera 11.10+ */

background: -o-linear-gradient(top, #2F2727, #1a82f7);

}

 

Useful Keywords

  • closest-corner: The color is ranged so that its external figure progresses all the way through the bend of the gradient box that is nearby to its center.
  • closest-side: The color is ranged so that its external figure convenes with the side surface of the gradient box that is nearby to the middle.
  • farthest-corner: The gradient is ranged so that its external figure progresses all the way through the bend of the gradient box that is furthermost from its center
  • farthest-side: The color is ranged so that its external form convenes with the side surface of the gradient box that is furthermost from the middle.