Rice. 1. Gradient line, start and end points and gradient angle
Linear Gradient created using two or more colors that have a direction specified, or gradient line.
If the direction is not specified, the default value is used - top down.
By default, gradient colors are distributed evenly in a direction perpendicular to the gradient line.
Background: linear-gradient(angle/side or slant by keyword(pair of keywords), first color, second color, etc.);
Direction the gradient can be specified in two ways: using tilt angle in degrees deg, the value of which determines the angle of inclination of the line inside the element.
Div ( height: 200px; background: linear-gradient(45deg, #EECFBA, #C5DDE8); )
using keywords to top , to right , to bottom , to left which correspond to a gradient angle of 0deg , 90deg , 180deg and 270deg respectively.
Div ( height: 200px; background: linear-gradient(to right, #F6EFD2, #CEAD78); )
If the direction is specified by a pair of keywords, for example, to top left , then the starting point of the gradient will be located in the opposite direction, in this case the bottom right.
Div ( height: 200px; background: linear-gradient(to top left, powderblue, pink); )
For an uneven distribution of colors, the starting position of each color is indicated through the stop points of the gradient, the so-called color stops. Breakpoints are specified in %, where 0% is the starting point, 100% is the end point, for example:
Radial Gradient differs from linear in that the colors come from one point (the center of the gradient) and are evenly distributed outward, drawing the shape of a circle or ellipse.
Background: radial-gradient(gradient shape/size/center position, first color, second color, etc.);
Gradient shape defined by the keywords circle or ellipse . If no shape is specified, the radial gradient defaults to an ellipse shape.
Div ( height: 200px; background: radial-gradient(white, #FFA9A1); )
Center position specified using the keywords used in the background-position property, followed by the at prefix. If the center position is not specified, the default value at center is used.
Div ( height: 200px; background: radial-gradient(at top, #FEFFFF, #A7CECC); )
A pair of values, specified in % , em , or px length units, can control the size of the elliptical gradient. The first value specifies the width of the ellipse, the second – the height.
Div ( height: 200px; background: radial-gradient(40% 50%, #FAECD5, #CAE4D8); )
Gradient size specified using keywords. The default value is farthest-corner.
div ( height: 200px; background: radial-gradient(circle farthest-corner at 100px 50px, #FBF2EB, #352A3B); )
Using a radial gradient, you can create realistic three-dimensional shapes, such as balls and buttons.
Ball
div ( width: 200px; height: 200px; border-radius: 50%; margin: 0 auto; background: radial-gradient(circle at 65% 15%, aqua, darkblue); )
Button
.wrap ( height: 200px; padding: 50px 0; background: #cccccc; ) .button ( width: 100px; height: 100px; border-radius: 50%; margin: 0 auto; background: radial-gradient(farthest-side ellipse at top left, white, #aaaaaa); box-shadow: 5px 10px 20px rgba(0,0,0,0.3), -5px -10px 20px rgba(255,255,255,0.5); )
Postage Stamp
Using transparent color in gradients, you can create effects like this.
Jpg">
.container ( background: #B7D1D8; padding: 25px; ) .wrap ( background: radial-gradient(transparent, transparent 4px, white 4px,white); padding: 10px; width: 300px; height: 220px; background-size: 20px 20px; background-position: -10px -10px; /*cut off the pattern along the edge*/ margin: 0 auto; ) img ( width: 100%; )
3. Gradient repeat
In addition to linear and radial gradients, there is gradient repeating, which is specified using the repeating-linear-gradient() and repeating-radial-gradient() functions, respectively. A background of repeating gradients looks messy, so it is recommended to start the next color where the previous one stopped, thus creating striped patterns.
Background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%); /* Safari 5.1-6.0 */ background: -o-repeating-radial-gradient(red, yellow 10%, green 15%); /* Opera 11.6-12.0 */ background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%); /* Firefox 3.6-15 */ background: repeating-radial-gradient(red, yellow 10%, green 15%); /* Standard syntax */
5. Gradient and background image combination
By combining a gradient and an image, you can create interesting effects. For a gradient, you need to use translucent colors so that the picture remains visible.
CSS gradients allow you to create a background of two or more colors that smoothly transition from one to another. They have been with us for quite a long time, and have pretty good browser support. Most modern browsers understand them without prefixes, for IE9 and older there is a Gradient Filter, and for IE9 you can use SVG.
Gradients can be used anywhere images are used: in backgrounds, as list bullets, they can be specified in content or border-image .
Linear-gradient
Linear gradients are quite easy to use. For the most basic gradient, just set the start and end colors:
Background: linear-gradient(oranged, gold);
There can be any number of colors more than two. You can also control the direction of the gradient and the boundaries (stopping points) of the colors.
The direction can be specified in degrees or keywords.
Key words: to top = 0deg ; to right = 90deg; to bottom = 180deg - default value; to left = 270deg .
Keywords can be combined to create a diagonal gradient, such as to top left .
Below you can see how different directions work in stretching from lilac to yellow:
Here is the code for the very first square, for example:
One thing to remember is that to top right is not the same as 45deg . The gradient colors are perpendicular to the gradient direction line. With to top right, the line goes from the lower left to the upper right corner, with 45deg - it is located strictly at this angle, regardless of the size of the figure.
The difference is clearly visible in rectangular figures:
You can also set stop points for gradient colors; the values are specified in units or percentages and can be greater than 100% and less than 0%.
Examples of setting values in %, in em, and values that go beyond the boundaries of the element:
The closer the stopping points of neighboring colors are, the clearer the boundary between them will be. This way you can easily make striped backgrounds:
This is how you can create, for example, a background for a side column, stretched to the entire height of the parent element:
The stripes on the sidebar background are another gradient consisting of alternating full transparency and white with 30% transparency. Gradients with translucent colors are convenient because they can be applied over a background of any color.
The gradient in the example is set in complex, long code because the stripes should only be placed above the background for the sidebar. If you don't try to make everything the background for one block, you could solve the problem using a pseudo-element.
If there are no restrictions, the code can be much shorter:
Light ( background: peachpuff linear-gradient(90deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .4) 50%) center center / 2em; ) .dark ( background: steelblue linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .2) 50%) center center / 100% 1em; )
In the first line we set the background color of the element, type and direction (the color and direction can be omitted), in the second line we define the gradient colors and the border between them, in the third line we set the position and size of the resulting image. The most important part is the size. By default, the background is repeated, so the resulting pattern will fill the background of the element. Very easy and understandable :)
The entire entry can be made in one line, but for readability it is more convenient to write in several, especially for complex gradients.
It's also important to know that the transparent keyword means transparent black, not transparent white, so if you use it in Firefox you might end up with something like this:
To avoid this, use completely transparent colors of the desired shade, for example, white: rgba(255, 255, 255, 0) or black rgba(0, 0, 0, 0) . You can read about different ways to set colors.
To find out the rgb notation of a specific color, you can use CSS.coloratum, an instrument from Lea Verou.
In addition to the usual linear-gradient, you can make a repeating-linear-gradient - a repeating gradient
Sample code:
Background: repeating-linear-gradient(green, green .5em, transparent .5em, transparent 1em);
Unfortunately, repeating gradients behave haphazardly and are only suitable for patterns that don't care about precision. If you need precision, use linear-gradient in combination with background-size and background-repeat .
Gradients have the same limitation as box-shadow: they cannot be given individual colors or direction. This leads to code duplication and an urgent need to use preprocessors when creating complex gradients.
Another limitation is that gradients are not animated, which, however, can be worked around to some extent.
To quickly create cross-browser gradients there is a very convenient tool: colorzilla.com/gradient-editor/. In addition to code for modern browsers, it will offer code for older IE and SVG for 9th.
Combined with basic background image controls, gradients give you the greatest ability to create backgrounds of varying degrees of complexity without using images at all. You can use gradients to create complex and interesting patterns, but that’s a completely different topic.
Gradient - filling a selected area with a sequence of color shades with smooth transitions between them. A gradient is used to display a smooth transition between two or more specified color shades. Gradient example:
Previously, background images were used to create a gradient effect. Now you can use CSS3 to create a gradient background. Elements with CSS3 gradients look better when zoomed in than their plug-in background image counterparts, since the gradient is generated by the browser directly to the specified area.
Note that the CSS gradient is a browser-generated background image, not a background color, so it is defined as the value of the background-image property. This means that the gradient can be specified not only as the value of the background-image property, but also anywhere you can insert a background image, such as list-style-image and background .
CSS3 defines two types of gradients:
Linear Gradient(Linear Gradient) - a smooth transition from color to color in a straight line.
Radial Gradient(Radial Gradient) - a smooth transition from color to color from one point in all directions.
Linear Gradient
A linear gradient extends in a straight line, showing a smooth transition from one shade of color to another. A linear gradient is created using the linear-gradient() function. The function creates an image that is a linear gradient between the specified shades of colors. The size of the gradient corresponds to the size of the element it is applied to.
The linear-gradient() function takes the following comma-separated arguments:
The first argument is the degree of the angle or keywords that define the direction angle of the gradient line. Optional argument.
A comma-separated list of two or more colors, each of which can be followed by a stop position.
The simplest linear gradient requires only two arguments specifying the start and end colors:
Passing two arguments to the function sets a vertical gradient with the starting point at the top.
The direction of the gradient line can be determined in two ways:
Using degrees As the first argument, you can pass the degree of the angle of the gradient line, which determines the direction of the gradient, so for example, the angle 0deg (short for degree - degree) defines the gradient line from the bottom border of the element to the top, the angle 90deg defines the gradient line from left to right and etc. Simply put, positive angles represent clockwise rotation, negative angles represent counterclockwise rotation. Using Keywords The keywords "to top", "to right", "to bottom" or "to left" can also be passed as the first argument, these represent the angles of the gradient lines "0deg" "90deg" "180deg" "270deg" respectively.
The angle can also be set using two keywords, for example, to top right - the gradient line is directed to the upper right corner.
An example of a gradient specified in different directions:
As mentioned, a linear gradient can include a list of more than two colors, separated by a comma, and the browser will distribute them evenly across the entire available area:
After a color, you can specify a stop position for it, which determines the location of the color (where one color begins to transition into another) relative to the starting and ending points of the gradient. The stop position is specified using CSS supported units or percentages. When using percentages, the position stop position is calculated depending on the length of the gradient line. A value of 0% is the starting point of the gradient, 100% is the ending point.
Div ( margin: 10px; width: 200px; height: 200px; float: left; ) #one ( background-image: linear-gradient(to top right, blue, white 70%, blue); ) #two ( background-image : linear-gradient(to right bottom, yellow 10%, white, red, black 90%);) #three ( background-image: linear-gradient(to right, black 10%, yellow, black 90%); ) Try »
The color value can be specified in a variety of ways, such as specifying the color name, using hexadecimal (HEX) values, using RGB (RGBA) or HSL (HSLA) syntax. For example, using a gradient with transparency can be used in combination with a background color or image underneath the gradient to create interesting visual effects:
A gradient is a smooth transition from one color to another, and there can be several colors and transitions between them. With the help of gradients, the most bizarre web design effects are created, for example, pseudo-three-dimensionality, glare, background, etc. Also, with a gradient, elements look more attractive than monochromatic ones.
There is no separate property for adding a gradient, since it is considered a background image, so it is added through the background-image property or the generic background property, as shown in example 1.
Example 1: Gradient
Gradient
Here the obscene idiom traditionally begins the prosaic image, but the language game does not lead to an active dialogical understanding.
The result of this example is shown in Fig. 1.
Rice. 1. Linear Gradient for Paragraph
In the simplest case with two colors, demonstrated in example 1, the position from which the gradient will begin is first written, then the start and end colors.
To record a position, you first write to , and then add the keywords top , bottom and left , right , as well as their combinations. The order of the words is not important, you can write to left top or to top left . In table 1 shows different positions and the type of gradient obtained for colors #000 and #fff, otherwise from black to white.
Table 1. Gradient types
Position
Description
View
to top
0deg
Down up.
to left
270deg
From right to left.
to the bottom
180deg
Top down.
to right
90deg
From left to right.
to top left
From the lower right corner to the upper left.
to top right
From the lower left to the upper right.
to bottom left
From the upper right corner to the lower left.
to bottom right
From top left to bottom right.
Instead of a keyword, you can specify the slope of the gradient line, which shows the direction of the gradient. First, the positive or negative value of the angle is written, then deg is added to it.
Zero degrees (or 360º) corresponds to the gradient from bottom to top, then the countdown is clockwise. The slope angle of the gradient line is shown below.
For top left and similar values, the gradient line's inclination angle is calculated based on the element's dimensions so as to connect two diagonally opposite corner points.
To create complex gradients, two colors will no longer be enough; the syntax allows you to add an unlimited number of them, listing colors separated by commas. You can use a transparent color (transparent keyword), as well as a semi-transparent color using the RGBA format, as shown in Example 2.
Example 2: Translucent colors
HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx
Gradient
The genesis of free verse, despite external influences, repels verbal metalanguage.
The result of this example is shown in Fig. 2.
Rice. 2. Gradient with translucent colors
To accurately position colors in a gradient, the color value is followed by its position in percentages, pixels, or other units. For example, record red 0%, orange 50%, yellow 100% means the gradient starts out red, then 50% orange, and then all the way yellow. For simplicity, extreme units like 0% and 100% can be omitted; they are assumed by default. Example 3 shows how to create a gradient button where the position of the second color out of three is set to 36%.
Example 3: Gradient Button
HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx
Button
The result of this example is shown in Fig. 3.
Rice. 3. Gradient button
By setting the position of the color, you can get sharp transitions between colors, which ultimately gives a set of monochromatic stripes. So, for two colors you need to specify four colors, the first two colors are the same and start from 0% to 50%, the remaining colors are also the same and continue from 50% to 100%. In the example, 4 stripes are added as the background of the web page. Due to the fact that the extreme values are automatically substituted, they can not be specified, so it is enough to write only two colors.
Example 4. Plain stripes
HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx
Horizontal stripes
Typical European bourgeoisie and respectability are elegantly illustrated by the official language.
The result of this example is shown in Fig. 4. Note that one of the gradient colors is set to transparent, so it changes indirectly through the background color of the web page.
Rice. 4. Background of horizontal stripes
Gradients are quite popular among web designers, but adding them is complicated by different properties for each browser and specifying multiple colors. To make it easier for you to create gradients and insert them into your code, I recommend the site www.colorzilla.com/gradient-editor, which makes it easy to set up gradients and immediately get the desired code. There are ready-made templates (Presets), viewing the result (Preview), adjusting colors (Adjustments), final code (CSS) that supports IE through filters. For those who have worked in Photoshop or another graphic editor, creating gradients will seem like a piece of cake, but for others it will not be difficult to figure it out quickly. In general, I highly recommend it.
Support for gradient fill using CSS was introduced about two years ago in browsers based on the Webkit engine (Google Chrome and Safari), but others did not support this property at that time, so gradients were made using images. Now this oversight has been corrected, Firefox 3.6+ fully supports gradient filling of objects, you can try to abandon images where possible.
In the last article there was not a word about gradient filling - today we will correct this shortcoming and talk about it. Moreover, the topic is very good.
In general, all modern browsers, including IE9, support shading. Vendor prefixes are used since the specification has not yet been officially adopted. You can read a complete guide to gradients in CSS3 there css3 gradients thoroughly dismantled.
In this article we’ll talk a little about browsers and the features of gradients in them:
Gradients in webkit browsers
The syntax of the property is quite simple - the first value is the fill type, the second and third are the start and end positions, respectively, the fourth and fifth are the start and end colors.
Firefox 3.6+
Using gradients in Firefox
Here a slightly different syntax is used, the fill type is indicated in the property name, there is only the position of the beginning of the gradient and, similarly, the color of the beginning and end of the fill.
Internet Explorer
This browser has long and deservedly enjoyed the “love” of layout designers for its extremely original behavior. So in this case, a filter is used, the text of which will only be read by the IE browser. Angular and radial fills are not supported here, only horizontal or vertical, using two values - startColorstr And endColorstr. This must be taken into account when working, otherwise the result in IE will look very sad, and the percentage of this browser is still quite large.
What is needed to ensure cross-browser compatibility of this property for an object? Add four lines of code to its properties:
Background: #999; /* for browsers without css3 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cccccc", endColorstr="#000000"); /* for IE */ background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit */ background: -moz-linear-gradient(top, #ccc, #000); /* for firefox 3.6+ */
The top line was added specifically for browser owners, do not support this property, in order to avoid misunderstandings with the display, in such cases the block will be filled with one color. A small note - if some text is placed in the block, you need to think about its color, combined with both a gradient fill and a single color fill, to ensure normal readability. Don't forget about this. As a result, in all common browsers the image should be correct and look something like this:
And one more thing - remember that not all browsers can work correctly with this property, their percentage is too small compared to the general background, this should be taken into account when developing and not get too carried away. In any case, careful debugging will always help.
Rice. 1. Gradient line, start and end points and gradient angle 
