Documentos de Académico
Documentos de Profesional
Documentos de Cultura
/* La sintaxis vieja, obsoleta, pero todavía necesaria, con prefijo, para Opera y
navegadores basados en WebKit-based */
background: -prefix-linear-gradient(top, blue, white);
Usando Angulos
Por ejemplo, aquí hay dos gradientes, el primero con una dirección hacia la
derecha, y el segundo tiene un ángulo de 70 grados.
El ángulo es especificado como un ángulo entre una línea vertical y la línea del
gradiente, contando en el sentido horario. En otras palabras, 0deg crea un
gradiente vertical desde el fondo hasta el tope, mientras 90deg genera un
gradiente horizontal de izquierda a derecha:
background: linear-gradient(<angle>, red, white);
Color stops
Color stops are points along the gradient line that will have a specific color at that
location. The location can be specified as either a percentage of the length of the
line, or as an absolute length. You may specify as many color stops as you like in
order to achieve the desired effect.
Note that the first and last color stops don't specify a location; because of that,
values of 0% and 100% are assigned automatically. The middle color stop specifies
a location of 80%, putting it most of the way toward the bottom.
Notice that the color stops are automatically spaced evenly when no locations are
specified.
Gradients support transparency. You can use this, for example, when stacking
multiple backgrounds, to create fading effects on background images. For example:
/* The old syntax, deprecated, but still needed, prefixed, for
Opera and WebKit-based browsers */
background: linear-gradient(left, rgba(255,255,255,0),
rgba(255,255,255,1)), url(http://foo.com/image.jpg);
The backgrounds are stacked with the first specified background on top, and each
successive background farther away. By stacking backgrounds this way, you can
create very creative effects as seen above.
Radial gradients
Radial gradients are specified using the radial-gradient functional notation. The
syntax is similar to that for linear gradients, except you can specify the gradient's
ending shape (whether it should be a circle or ellipse) as well as its size. By default,
the ending shape is an ellipse with the same proportions than the container's box.
Color stops
You specify color stops the same way as for linear gradients. The gradient line
extends out from the starting position in all directions.
By default, as with linear gradients, the color stops are evenly spaced:
Screen Shot Live Demo
Size
This is one of the areas in which radial gradients differ from linear gradients. You
can provide a size value that specifies the point that defines the size of the circle or
ellipse. See this description of the size constants for specifics.
This ellipse uses the closest-side size value, which means the size is set by the
distance from the starting point (the center) to the closest side of the enclosing box.
Screen Shot Live Demo
This example is similar to the previous one, except that its size is specified
as farthest-corner, which sets the size of the gradient by the distance from the
starting point to the farthest corner of the enclosing box from the starting point.
Screen Shot Live Demo
This example uses closest-side, which determines the circle's size as the distance
between the start point (the center) and the closest side.
Screen Shot Live Demo
Repeating gradients
The linear-gradient and radial-gradient properties don't support automatically
repeating the color stops. However, the repeating-linear-gradient and repeating-
radial-gradient properties are available to offer this functionality.
background-color: #000;
background-image: repeating-linear-gradient(90deg, transparent,
transparent 50px,
rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
transparent 56px, transparent 63px,
rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
transparent 69px, transparent 116px,
rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25)
166px),
repeating-linear-gradient(0deg, transparent, transparent 50px,
rgba(255, 127, 0, 0.25) 50px,
rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent
63px, rgba(255, 127, 0, 0.25) 63px,
rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent
116px, rgba(255, 206, 0, 0.25) 116px,
rgba(255, 206, 0, 0.25) 166px),
repeating-linear-gradient(-45deg, transparent, transparent 5px,
rgba(143, 77, 63, 0.25) 5px,
rgba(143, 77, 63, 0.25) 10px),
repeating-linear-gradient(45deg, transparent, transparent 5px,
rgba(143, 77, 63, 0.25) 5px,
rgba(143, 77, 63, 0.25) 10px);