Today I Learned - Rocky Kev

TIL an easy way to make rainbow text

POSTED ON:

TAGS: css colors

This neat trick!

CSS TIP 💡✨🌈

You can create gradient text by tweaking just three simple properties: background-image, color, and background-clip!

CodePen: https://t.co/5VpMsyIE9C pic.twitter.com/qHLIRPDHOn

— Ale ☻ (@pokecoder) December 3, 2021
.gradient-text {
    background-image: linear-gradient(45deg, blue, red);
    color: transparent;
    -webkit-background-clip: text;
}

See the Pen Gradient Text by Ale (@pokecoder) on CodePen.

Related TILs

Tagged: css

TIL the alternate keyword

If 'alternate' appears along with the stylesheet keyword, the linked file is an alternative stylesheet. It won’t be applied to the document, but it will be ready for when we need it.

TIL Logical Properties

For that sweet sweet Internationalization you want to avoid directional words like 'left', 'right', 'top', and 'bottom'.

TIL Using pseudo-classes in your querySelector!

let notTuna = document.querySelectorAll('.sandwich:not(.tuna)')