Geek Answers Handbook

Auto-contrast font color for background

I have a field background. The bottom is green, the top is gray. There is text at the top. Is there a way for the text to "feel" what background color and shade the font so that it contrasts?

For example, the text above the gray sky will become brighter, and the text above the green field will become darker to make it more visible.

I can go pretty far on this, but any suggestions are welcome. (Note: I'm not looking for an answer to manually change the font colors.)

+11
fonts css3 background contrast
source share
1 answer

More like an experiment than otherwise:

Set text with background inheritance to get the base background; then attach it to the text and apply several filters to it:

.test { width: 800x; height:220px; font-size: 200px; background-image: url(bosque.jpg); color: white; position: relative; } .inner { position: relative; background-image: inherit; -webkit-background-clip: text; color: transparent; -webkit-filter: invert() sepia(); }

play the violin

(Works only in webkit)

Check also this:

lively madness

contrast animation

UPDATE: we have new ways to handle this. Check out the demo using mix-blend-mode: difference

 div { font-size: 300px; color: gray; mix-blend-mode: difference; } body { background-image: url(http://placekitten.com/900/600); } 
 <div>TEST</div>
+17
source share

More articles:


All Articles