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?
 

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.

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...

@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!

code of conduct - report abuse