A Dynamic Gradient Text Function in Sass

In this post a common text color function will be extended to work with gradient backgrounds. The effect is achieved by first creating a gradient background from a list of values. The function then appends corresponding color values to a new list to create a text gradient.

A little background...

The ability to change the color of text depending on its background is a common request, one way to do this is to test for the lightness of the background and then modify the text accordingly. A popular and well documented function exists to do just that...

[code language="sass"] @function set-notification-text-color($color) { @if (lightness($color) > 50) { @return #000000; // Lighter background, return dark color } @else { @return #ffffff; // Darker background, return light color } } [/code]

The above function is applied like this...

[code language="sass"] .notification-confirm { background: $notification-confirm; color: set-notification-text-color($notification-confirm); } [/code]

Step 1 - The background gradient mixin

Continue reading %A Dynamic Gradient Text Function in Sass%

by Cathy Dutton via SitePoint