Text Opacity

Utility classes for controlling an element's font color opacity.

The ability to control an element's color is only provided as a class. We do not provide variables to control this. This class must be paired with a .d-fc-[color] class to work properly. The text opacity class resets the font color's alpha channel CSS variable value.

Starting in v5.8.0, Dialtone began providing immutable type classes, meaning they include an !important to override CSS specificity. All previous class names still exist, but are considered deprecated and should not be used moving forward. They will be removed in a future version.

Class Output
.d-fo0 --fo: 0;
.d-fo10 --fo: 10;
.d-fo25 --fo: 25;
.d-fo50 --fo: 50;
.d-fo75 --fo: 75;
.d-fo90 --fo: 90;
.d-fo95 --fo: 95;
.d-fo99 --fo: 99;
.d-fo100 --fo: 100;
.d-fc-blue .d-fo0

The quick brown fox jumped over the lazy dog.

.d-fc-navy .d-fo10

The quick brown fox jumped over the lazy dog.

.d-fc-bright-emerald .d-fo25

The quick brown fox jumped over the lazy dog.

.d-fc-emerald .d-fo50

The quick brown fox jumped over the lazy dog.

.d-fc-crimson .d-fo75

The quick brown fox jumped over the lazy dog.

.d-fc-wildberry .d-fo90

The quick brown fox jumped over the lazy dog.

.d-fc-berry .d-fo95

The quick brown fox jumped over the lazy dog.

.d-fc-sunflower .d-fo99

The quick brown fox jumped over the lazy dog.

.d-fc-blue .d-fo100

The quick brown fox jumped over the lazy dog.

<p class="d-fc-blue d-fo0"></p>
<p class="d-fc-navy d-fo10"></p>
<p class="d-fc-bright-emerald d-fo25"></p>
<p class="d-fc-emerald d-fo50"></p>
<p class="d-fc-crimson d-fo75"></p>
<p class="d-fc-wildberry d-fo90"></p>
<p class="d-fc-sunflower d-fo95"></p>
<p class="d-fc-berry d-fo99"></p>
<p class="d-fc-blue d-fo100"></p>