Originally published at: http://www.sitepoint.com/dynamic-gradient-text-function-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…
@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
}
}
The above function is applied like this…
.notification-confirm {
background: $notification-confirm;
color: set-notification-text-color($notification-confirm);
}