Skip Navigation

Photo by Zdeněk Macháček  on Unsplash

Accents

Natura11y provides the following mechanisms to add visual interest to your layouts.

Gradient Veneer

Apply a directional gradient to any selector using the .gradient-veneer-{x} utilities. Where x specifies the gradient's direction: top, right, bottom, or left (Figure 1).

.gradient-veneer-top

<div class="gradient-veneer-top">...</div>
<div class="gradient-veneer-right">...</div>
<div class="gradient-veneer-bottom">...</div>
<div class="gradient-veneer-left">...</div>
Figure 1

Gradient veneers use a single color, fully transparent to fully opaque. They inherit their color from the nearest ancestrial background color (usually applied with theme color utilities).

.gradient-veneer-primary

<div class="backdrop theme-primary">

    <div class="backdrop__image gradient-veneer-bottom">
        <!-- <img src="./path/to/image.jpg" alt="Placeholder"> -->
    </div>

    <div class="backdrop__cover">
        ...
    </div>

</div>
Figure 2

Gradient veneer utilities place the gradient (as a psuedo element) above all child selectors on the z index. With the above examples, we applied a gradient veneer utility to the .backdrop-image selector. This allows the gradient to appear above its child <img> tag (Figure 2, lines 3-5).

Related CSS Variables

Further customization options are available with CSS variables.

Subtle Fill

The .subtle-fill utility class adds a light tint background to any selector. Subtle fills inherit their color from the text color of the element on which they are placed.

With the card examples below, we can add soft emphasis to the action buttons within the .card__footer selector.

Notice the subtle fill appears darker within the white theme card, while appearing lighter on the dark theme card.

Rainbow

A rainbow is a meteorological phenomenon that appears as a multicolored arc that forms with the sunlight reflecting off water.

<div class="card theme-dark">

    <div class="card__body">
        ...
    </div>

    <div class="card__foot subtle-fill">
        ...
    </div>

</div>
Figure 3

Related CSS Variables

Further customization options are available with CSS variables.