Fun with
text clip
The above title is a nice way to get an inset shadow on text. Uses the background-clip: text
property and sets the
background color to the darkest color that will be present in the shadow. Then the text-shadow
it applies is actually a
highlighing color. So it's sort of like a reverse shadow! Since the inset
modifier doesn't work on text-shadow. Very clever. Not my idea, taken from here.
But this got me thinking about other uses for text clipping! Or background clipping in general. This is an image of literally me:
Lets use that as a base background that we will clip.
Hmm, I don't know about you, but I think this looks kinda odd. Ideally I would want to have a partially transparent image, but with the text
making the image underneath fully opaque. This is probably a use case for mix-blend-mode
Okay honestly doesn't look that much better. It's a shame the Cabin font doesn't come with a black weight variant. Lets try to modify the first one with a shadow as well.
This does feel like it increases legibility a fair bit. Raelly, this is not the best image to use. Which brings me to a second point. This can give a texture to your normal text.
And here it is with a serif font. This should be even more subtle as the lines are thinner. Or maybe just because of that it becomes more apparent? Subjectively to me, this text feels "thinner", almost like it has a lower font weight than the normal body text. However just making a font color lower contrast also can have this effect in moderate amounts, and the bg noise does have a lighter average background color due to the noise being a bright color.
I kinda like this effect a lot! However just using on normal text like this, maybe not so much. I think it's nice to use on titles though.
Title with noise