re: How to make Dynamic Text Overlays on Images VIEW POST

TOP OF THREAD FULL DISCUSSION
re: I'm really not familiar with CSS, what exactly is hacky about it?
 
link2twenty profile image Andrew Bone twitter logo github logo
Permalink Report Abuse

It's these 3 lines that I don't like.

{
  background-clip: text;
  color: transparent;
  filter: invert(1) grayscale(1) contrast(9);
}

What we're doing is

  • removing bits of the span not covered by text
  • making the text invisible
  • applying filters to the span
    • inverting the colour
    • setting it to grayscale
    • setting the contrast high so we just get black and white.

But it doesn't know where the text is over the image, so it gets the colours from the top left corner.

THREAD
link2twenty profile image Andrew Bone twitter logo github logo
Permalink Report Abuse

There is a slightly less hacky option in the works but, currently, it doesn't work with background-clip. It's called background-filter

example

webdesign.tutsplus.com/tutorials/c...

THREAD
sarthology profile image Sarthak Sharma twitter logo github logo Author
Permalink Report Abuse

That’s cool

THREAD
kenbellows profile image Ken Bellows twitter logo github logo
Permalink Report Abuse

@link2twenty As I read your "why's it hacky" explanation, my thoughts were:

Nah, that's not hacky, that's brilliant.
Still not hacky.
Still loving it.
Grayscale? Such a cool idea.
And contrast to finish. Perfect. Why is any of this hacky?

"But it doesn't know where the text is over the image, so it gets the colours from the top left corner." -- Ahhhhh.... and that's where the hack hits the fan.

So close!

REPLY
code of conduct - report abuse