Text color CSS property

Overview

The color CSS property defines the text color for HTML elements, allowing you to customize the appearance of any text-based element within a page. TorusKit enhances the color property by supporting its native CSS syntax, as well as adding convenient shorthands (c for color) and aliases (text-color). This flexibility enables developers to implement custom colors efficiently for hover, animation, and other triggers.

Syntax

Default

In its default usage, the color property is specified directly in TorusKit with the option of using either the color property or the shorthand c. This makes it easy to style elements with a broad range of color formats, such as hex codes, rgba, and hsla values.

Alias

TorusKit also provides the text-color alias for the color property, along with its shorthand text.

Examples

The examples below illustrate how to use color for hover effects, initial states, and animation timelines.

Initial value

Sometimes you need to start the animation, (or just style the element) from certain predefined state - an initial value. Because the TorusKit process the elements before the render, there is no Flash of unstyled content, so the styles are applied immediately after the page load.

Discrete timeline

A discrete timeline requires only two values—an initial value (optional) and a final one. This is the simplest way to animate CSS properties. In this example, the color property is animated to a final value of #ff00a9. In this case, the initial value is computed automatically from the element’s CSS.

Sequenced timeline

A sequenced timeline animates properties in a sequence (series) of steps. When one step finishes, the next one begins. Each step can include one or multiple properties. In this example, we animate the color properties in various format (hex, rgba and hsla)

Offset timeline

In an offset timeline, intermediate steps in an animation sequence are defined by percentage offsets. This example demonstrates how to animate the above example, but with using the offsets this time.

In this case, we have omitted the first step with an offset of 0%, which is typically used to set the initial values for all properties. As a result, TorusKit retrieves the initial values from the current element’s style.

Utilities

text-opacity

The text-opacity utility enables you to adjust the opacity of the text color. It will automatically get the text color of an element and change just the alpha channel of rgba color without touching the other color channels.

Note: The text-opacity property must be used in combination with a trigger - it cannot be applied as a static initial style.

text-lighten

Lighten the text color using the text-lighten utility. Based on the specified strength, this utility increases the r, g, and b channels of an rgb color. For example, applying text-lighten(100) to rgba(0, 50, 80, 1) adds 100 to each channel, resulting in rgba(100, 150, 180, 1), creating a lighter shade.

Note: The text-lighten property must be used in combination with a trigger - it cannot be applied as a static initial style.

text-darken

Lighten the text color using the text-darken utility. Based on the specified strength, this utility increases the r, g, and b channels of an rgb color. For example, applying text-darken(100) to rgba(0, 50, 80, 1) reduces 100 to each channel, resulting in rgba(100, 150, 180, 1), creating a lighter shade.

Note: The text-darken property must be used in combination with a trigger - it cannot be applied as a static initial style.