Linear gradients are gradients that follow a specific direction. The imaginary line that defines this direction is known as the gradient line and the lines of colors that constitute the gradient are drawn perpendicular to it. To create a linear gradient, the background-image or background property is used with the CSS linear-gradient() function and it is this function that takes the values used to create the gradient. These values are listed in Table 16.1.
The syntax for specifying these values in the table to create a linear gradient is:
background: linear-gradient(<angle> or to <side or corner>, color- stopl, color-stop2, …);
Figures 16.6 and 16.7 show how the linear-gradient() function is used with the background property to create a gradient and Figure 16.8 shows the result.
In the example, the div{} rule defines the size of all the <div> elements, the color and size of their text content, and the space between their border and the content. The rest of the rules show different ways the parameters for the linear-gradient() function can be specified. The first four are relatively basic. The #grad1{} rule creates gradient that starts from top with orange and ends at bottom with black. When no direction is specified, gradient goes from top to bottom. The #grad2{} rule creates gradient that goes from right to left, starting with #ffa500 and ending with black. The #grad3{} rule creates gradient that goes from left to right, starting with rgb(255,165,0) and ending with rgba(0,0,0,0.1). Similarly, the #grad4{} rule creates gradient that goes from left to right, but specifies color in a different format. For more on different methods of specifying color, refer to Chapter 9.
In the #grad5{} rule, the direction of the gradient line is specified as 45deg and the gradients are drawn along and perpendicular to it, starting from orange. Where to start changing to black is specified as 50% along the gradient line. The #grad6{} rule creates gradient that goes from left to right, starting with red, turning completely transparent at 70%, and ending with blue. The transparent keyword is a shorthand for transparent black (i.e., rgba(0,0,0,0)), which also has the same effect as white. Similarly, the #grad7{} rule creates gradient that goes from left to right, but one with solid-color stripes, which are produced by making the position of a stop less than or equal to that of the one before it. Notice in the example that the first gray stops at the same point the orange starts (i.e., at 15%) and, similarly, the orange stops where the second gray starts (i.e., at 85%). The #grad8{} rule creates gradient that goes from bottom-left to top-right and gives equal percentage to each color specified, since no positions are specified.
1. Repeating Linear Gradients
Gradients can be repeated to create a uniform pattern. You can achieve this using the repeating-linear-gradient() function and the same value-types as a linear gradient. Figures 16.9 and 16.10 show how this is done and the result.
The values used in the rules are mostly similar to those you already saw in the previous examples. The div{} rule specifies the size of box and the span{} rule the color of the text and its background to ensure good enough legibility. The #grad1{} rule creates a gradient that goes in 180° direction (i.e., top to bottom), starting with gray, then gray again for 7% and black for 15%. This sequence is then repeated for the height of the box. The #grad2{} rule specifies gradient that goes in 45° direction (i.e., bottom-left to top- right), starting with black, changing to white after 20px, and going on for 50px. This sequence is repeated for the width of the box. The #grad3{} rule specifies -45° direction (i.e., bottom-right to top-left), starting with the transparent keyword (i.e., rgba(0,0,0,0)), changing to black after 20px, and white after 50px. Various patterns can be created by adjusting the value of the stops, number of transparent keyword, and the transparency of colors, using RGBA or HSLA.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.