Gradients
It is possible to fill a class or element with more than one color, and these changes can consist of smooth transitions or hard stops. We do this by applying a new kind of value involving various kinds of gradients.
For instance, if we style the the bufferline as follows:
when play begins:
css-set-fast ".BufferWindow; background; linear-gradient(to bottom left, #E7E9D5 50%, #E99EE1 50%)";
Note the distinction of to bottom. A gradient progresses in a specific direction, and here this linear-gradient will progress from top right to bottom left. We will get two equally-distributed areas because each color receives an even 50% of the .BufferLine. There is no overlap, so there is no actual gradient but rather clearly-separated zones.
In order to to implement a graduated color shift, we should specify a
color stop value for only one of the color values.
In this case,
when play begins:
css-set-fast ".BufferWindow; background; linear-gradient(to bottom left, #E7E9D5 50%, #E99EE1)";
will yield
We need not use only one color. The format remains the same; we need only add more
color and stop position values:
when play begins:
css-set-fast ".BufferWindow; background; linear-gradient(to bottom left, darkslategray 0%, Gainsboro 30%, FloralWhite 50%, Khaki 70%, Orange 100%)";
produces this effect:
We are not limited to linear-gradients. The additional options are radial-gradient, conic-gradient and versions of these three that repeat.
While this reference cannot cover all the permutations, hopefully we will be able to share some interesting examples once this part of the reference is completed! For now, note that the basic ingredients of color-stop and color remain more or less the same. Take this radial-gradient example for instance:
when play begins:
css-set-fast ".BufferWindow; background; radial-gradient(darkslategray 0%, Gainsboro 30%, FloralWhite 50%, Khaki 70%, Orange 100%)";
As a word of caution, note that gradients can complicate our plans for legibility, because we are considering color contrast in terms of multiple colors. Black text will be harder to read at the center of this example.
While they cannot assist us extradorinarily complex cases, there are many online gradient generators for CSS. Using one will help authors visualize the color combinations quickly without the need for frequent compiles.
Gradients, like other sorts of background value, can be specified for custom classes as well.