Color shade
Change the lightness and darkness of a background or text color.
Overview
The bg-lighten, bg-darken, text-lighten and text-darken aliases change the shading of the CSS background-color and a color (text) properties by increasing or decreasing the r, g and b channels of the CSS rgba() function. For example, using bg-lighten(100) on rgba(0, 20, 40, 1) adds 100 to each channel, resulting in the lighter color rgba(100, 120, 140, 1).
Syntax
Default
The default {bg|text}-{lighten|darken} parameters:
| Name | Default value | Accepted values |
|---|---|---|
{bg|text}-{lighten|darken} |
0 |
int |
Examples
These examples show the bg-lighten, bg-darken, text-lighten and text-darken aliases in action using the hover trigger, but you can use any of the supported triggers.
Background shade
bg-lighten and bg-darken change the shading of a background color.
bg-lighten
The bg-lighten alias lightens the background color by specified amount.
bg-darken
The bg-darken alias darkens the background color by specified amount.
Text color shade
text-lighten and text-darken change the shading of a text color.
text-lighten
The text-lighten alias lightens the text color by specified amount.
text-darken
The text-darken alias darkens the text color by specified amount.
Triggers
Since you can use any of the supported triggers, here are a couple of usage examples:
Active
The active trigger is executed when the user clicks and holds (or taps) the element, then reverts upon release.
Scroll
You can even control the progression of the shading effect based on the scroll position.
Mouse
Similar to above, you can use a mouse or pointer trigger to control the progression of an effect.
Options
All property options passed in the <> are supported.