CSS3Basic Tutorial

CSS3 Text Overflow(Text Overflow)CSS3 Background(Background)

CSS3 Gradients (Gradients)

CSS3The gradient feature allows you to create gradients from one color to another without using any images.

Using CSS3Gradients

CSS3The gradient feature provides a flexible solution for generating smooth transitions between two or more colors. To achieve this effect, we had to use images. Using CSS3Gradients can reduce download time and save bandwidth usage. Gradient elements can be scaled up or down proportionally to any degree without losing quality, and the output will be rendered faster because it is generated by the browser.

There are two styles of gradients:Linear (linear) andRadial(radial).

Create CSS3 Linear Gradient (linear)

To create a linear gradient, you must define at least two color stops. However, to create more complex gradient effects, you can define more color stops. Color stops are the colors you want to present with a smooth transition. You can also set the starting point and direction (or angle) of the gradient effect. The basic syntax for creating a linear gradient using keywords can be given as:

linear-gradient(angle, color-stop1, color-stop2, ...)

Linear Gradient-From top to bottom

The following example will create a linear gradient from top to bottom. This is the default value.

Example

.gradient {
　　　　/*　Fallback for browsers that don't39;t support gradients　*/
　　　　background: red;
　　　　/*　For Safari　5.1　to　6.0　*/
　　　　background:　-webkit-linear-gradient(red, yellow);
　　　　/*　For Internet Explorer　10　*/
　　　　background:　-ms-linear-gradient(red, yellow);
　　　　
　　　　background: linear-gradient(red, yellow);
}

Test and see‹/›

Linear Gradient-From left to right

The following example will create a linear gradient from left to right.

Example

.gradient {
　　　　/*　Fallback for browsers that don't39;t support gradients　*/
　　　　background: red;
　　　　/*　For Safari　5.1　to　6.0　*/
　　　　background:　-webkit-linear-gradient(left, red, yellow);
　　　　/*　For Internet Explorer　10　*/
　　　　background:　-ms-linear-gradient(left, red, yellow);
　　　　
　　　　background: linear-gradient(to right, red, yellow);
}

Test and see‹/›

Linear Gradient-Diagonal

You can also create gradients along the diagonal direction. The following example will create a linear gradient from the bottom left corner of the element box to the top right corner.

Example

.gradient {
　　　　/*　Fallback for browsers that don't39;t support gradients　*/
　　　　background: red;
　　　　/*　For Safari　5.1　to　6.0　*/
　　　　background:　-webkit-linear-gradient(bottom left, red, yellow);
　　　　/*　For Internet Explorer　10　*/
　　　　background:　-ms-linear-gradient(bottom left, red, yellow);
　　　　
　　　　background: linear-gradient(to top right, red, yellow);
}

Test and see‹/›

Set the direction of the linear gradient using an angle

If you want to specify the direction of the gradient further, you can set an angle instead of predefined keywords. The angle 0deg creates a gradient from bottom to top, with positive angles indicating clockwise rotation, which means that the angle90deg creates a gradient from left to right. The basic syntax for creating a linear gradient using an angle can be given as:

linear-gradient(angle, color-stop1, color-stop2, ...)

The following example will create a linear gradient using an angle from left to right.

Example

.gradient {
　　　　/*　Fallback for browsers that don't39;t support gradients　*/
　　　　background: red;
　　　　/*　For Safari　5.1　to　6.0　*/
　　　　background:　-webkit-linear-gradient(0deg, red, yellow);
　　　　/*　For Internet Explorer　10　*/
　　　　background:　-ms-linear-gradient(0deg, red, yellow);
　　　　
　　　　background: linear-gradient(90deg, red, yellow);
}

Test and see‹/›

Create a linear gradient using multiple color stops

You can also create gradients for more than two colors. The following example will show you how to create a linear gradient using multiple color stops. All colors are evenly distributed.

Example

.gradient {
　　　　/*　Fallback for browsers that don't39;t support gradients　*/
　　　　background: red;
　　　　/*　For Safari　5.1　to　6.0　*/
　　　　background:　-webkit-linear-gradient(red, yellow, lime);
　　　　/*　For Internet Explorer　10　*/
　　　　background:　-ms-linear-gradient(red, yellow, lime);
　　　　
　　　　background: linear-gradient(red, yellow, lime);
}

Test and see‹/›

Set the position color stop

Color stops are points along the gradient line where a specific color will be. The position of the color stop can be specified as a percentage or an absolute length. You can specify any number of color stops as needed to achieve the desired effect.

Example

.gradient {
　　　　/*　Fallback for browsers that don't39;t support gradients　*/
　　　　background: red;
　　　　/*　For Safari　5.1　to　6.0　*/
　　　　background:　-webkit-linear-gradient(red, yellow　30%, lime　60%);
　　　　/*　For Internet Explorer　10　*/
　　　　background:　-ms-linear-gradient(red, yellow　30%, lime　60%);
　　　　
　　　　background: linear-gradient(red, yellow　30%, lime　60%);
}

Test and see‹/›

Note:When setting the color stop position to a percentage, 0% represents the starting point, and100% represents the endpoint. However, you can use values beyond this range, that is, before or after100% to achieve the desired effect.

repeating linear gradients

You can use repeating-linear-gradient() function repeats linear gradients.

Example

.gradient {
　　　　/*　Fallback for browsers that don't39;t support gradients　*/
　　　　background: white;
　　　　/*　For Safari　5.1　to　6.0　*/
　　　　background:　-webkit-repeating-linear-gradient(black, white　10,% lime　20%);
　　　　/*　For Internet Explorer　10　*/
　　　　background:　-ms-repeating-linear-gradient(black, white　10,% lime　20%);
　　　　
　　　　background: repeating-linear-gradient(black, white　10,% lime　20%);
}

Test and see‹/›

Create CSS3radial gradient(radial)

In radial gradients, colors appear from a single point and spread outward in a circular or elliptical shape, rather than transitioning from one color to another in a single direction like linear gradients. The basic syntax for creating radial gradients can be given as follows:

radial-gradient(shape size at position, color-stop1, color-stop2, ...);

This radial-The parameters of the gradient() function have the following meanings:

position —Specify the starting point of the gradient, which can be specified with units (px, em, or percentage) or keywords (left, bottom, etc.) for the starting point of the gradient.
shape —Specify the shape of the final shape of the gradient. It can be circular or elliptical.
size —Specify the size of the final shape of the gradient. The default value is farthest-side.

The following examples will display the radial gradient you create with evenly spaced color stops.

Example

.gradient {
　　　　/*　Fallback for browsers that don't39;t support gradients　*/
　　　　background: red;
　　　　/*　For Safari　5.1　to　6.0　*/
　　　　background:　-webkit-radial-gradient(red, yellow, lime);
　　　　/*　For Internet Explorer　10　*/
　　　　background:　-ms-radial-gradient(red, yellow, lime);
　　　　
　　　　background: radial-gradient(red, yellow, lime);
}

Test and see‹/›

Set the shape of the radial gradient

radial-The shape parameter of the gradient() function is used to define the final shape of the radial gradient. It can take the values circle or ellipse. Here is an example:

Example

.gradient {
　　　　/*　Fallback for browsers that don't39;t support gradients　*/
　　　　background: red;
　　　　/*　For Safari　5.1　to　6.0　*/
　　　　background:　-webkit-radial-gradient(circle, red, yellow, lime);
　　　　/*　For Internet Explorer　10　*/
　　　　background:　-ms-radial-gradient(circle, red, yellow, lime);
　　　　
　　　　background: radial-gradient(circle, red, yellow, lime);
}

Test and see‹/›

Note:If the shape parameter is omitted or not specified, if the size is a single length, the shape ends, the default is circular, otherwise elliptical.

Set the size of the radial gradient

radial-The size parameter of the gradient() function is used to define the size of the final shape of the gradient. The size can be set with units or keywords: closest-side, farthest-side, closest-corner, farthest-corner.

Example

.gradient {
　　　　/*　Fallback for browsers that don't39;t support gradients　*/
　　　　background: red;
　　　　/*　For Safari　5.1　to　6.0　*/
　　　　background:　-webkit-radial-gradient(left bottom, circle farthest-side, red, yellow, lime);
　　　　/*　For Internet Explorer　10　*/
　　　　background:　-ms-radial-gradient(left bottom, circle farthest-side, red, yellow, lime);
　　　　
　　　　background: radial-gradient(circle farthest-side at left bottom, red, yellow, lime);
}

Test and see‹/›

repeating radial gradients

You can also use the repeating-radial-gradient() function repeats radial gradients.

Example

.gradient {
　　　　/*　Fallback for browsers that don't39;t support gradients　*/
　　　　background: white;
　　　　/*　For Safari　5.1　to　6.0　*/
　　　　background:　-webkit-repeating-radial-gradient(black, white　10,% lime　20%);
　　　　/*　For Internet Explorer　10　*/
　　　　background:　-ms-repeating-radial-gradient(black, white　10,% lime　20%);
　　　　
　　　　background: repeating-radial-gradient(black, white　10,% lime　20%);
}

Test and see‹/›

CSS3opacity and gradients

CSS3Gradients also supportOpacity.StackingMultiple backgroundswhen you can use it to create a fading effect for background images.

Example

.gradient {
　　　　/*　Fallback for browsers that don't39;t support gradients　*/
　　　　background: url("images/sky.jpg");
　　　　/*　For Safari　5.1　to　6.0　*/
　　　　background:　-webkit-linear-gradient(left, rgba(255,255,255,0) rgba(255,255,255,1)) url("images/sky.jpg");
　　　　/*　For Internet Explorer　10　*/
　　　　background:　-ms-linear-gradient(left, rgba(255,255,255,0) rgba(255,255,255,1)) url("images/sky.jpg");
　　　　
　　　　background: linear-gradient(to right, rgba(255,255,255,0) rgba(255,255,255,1)) url("images/sky.jpg");
}

Test and see‹/›

CSS3 Text Overflow(Text Overflow)CSS3 Background(Background)