Invert CSS font based on background color

Question

Is there a CSS property to invert font-color depending on background-color like in this picture?

Answer 1

There is a CSS property called mix-blend-mode , but it is not supported by IE. I recommend using pseudo-elements . If you like to support IE6 and IE7, you can also use two DIVs instead of pseudo elements .

 .inverted-bar { position: relative; } .inverted-bar:before, .inverted-bar:after { padding: 10px 0; text-indent: 10px; position: absolute; white-space: nowrap; overflow: hidden; content: attr(data-content); } .inverted-bar:before { background-color: aqua; color: red; width: 100%; } .inverted-bar:after { background-color: red; color: aqua; width: 20%; } 

 <div class="inverted-bar" data-content="Lorem ipsum dolor sit amet"></div> 

Answer 2

Yes, there is now. Using mix-blend-mode , this can be done using CSS.

http://jsfiddle.net/1uubdtz6/

 div { position:absolute; height:200px } /* A white bottom layer */ #whitebg { background: white; width:400px; z-index:1 } /* A black layer on top of the white bottom layer */ #blackbg { background: black; width:100px; z-index:2 } /* Some white text on top with blend-mode set to 'difference' */ span { position:absolute; font-family: Arial, Helvetica; font-size: 100px; mix-blend-mode: difference; color: white; z-index: 3 } /* A red DIV over the scene with the blend-mode set to 'screen' */ #makered { background-color: red; mix-blend-mode: screen; width:400px; z-index:4 } 

 <div id="whitebg"></div> <div id="blackbg"></div> <div id="makered"></div> <span>test</span> 

At the moment, this is cutting-edge and not widely supported by all browsers - although it may someday become the standard. You probably need to enable the blend mode feature in order for this to work properly.

http://html.adobe.com/webplatform/enable/

Answer 3

I know this is an old question, but I wanted to add another solution that I used before I found out about mix-blend-mode .

The idea is to duplicate information in two layers: background and foreground, where the background and foreground have different background and text colors. They are identical in size and text. Between them, I use the div trim box to crop the top layer to the desired width, showing the top layer where it is not trimmed, and showing the background layer outside the crop window.

This is similar to the Two Divisions solution in the accepted answer, but uses an extra clipping field. This makes it easy to center the text, if necessary, and a simple, direct selection of colors.

HTML:

 <div class='progress' id='background'> <span></span> <div class='progress' id='boundbox'> <div class='progress' id='foreground'> </div> </div> </div> 

CSS (I apologize for the confusing identifier names, "background" and "foreground"):

 .progress { display: block; margin: 0; /* Choose desired padding/height in coordination with font size */ padding: 10px; height: 28px; } #background { position: relative; /* Choose a border to your liking, or none */ border: 1px solid lightgray; /* Choose your desired text attributes */ text-align: center; font-family: Calibri, "Sans Serif"; font-size: 16pt; /* Set the desired width of the whole progress bar */ width: 75%; /* Choose the desired background and text color */ background-color: white; color: black; } #foreground { position: absolute; left: 0; top: 0; /* Choose the desired background and text colors */ background-color: navy; color: white; } #boundbox { position: absolute; left: 0; top: 0; overflow: hidden; } 

I use jQuery to programmatically set the percentage of completion and make sure that the width of the foreground matches the width of the background and that they have the same text. It is also easy to do with pure Javascript.

 // Set foreground width to background width // Do this after DOM is ready $('#foreground').width($('#background').width()) // Based upon an event that determines a content change // you can set the text as in the below example percent_complete = 45 /* Compute a % complete value */ $('#foreground').text('${percent_complete}% complete') $('#background span').text($('#foreground').text()) $('#boundbox').css('width', '${percent_complete}%') 

And here is the violin: Progress Bar .

I tested this in Chrome, Firefox and Microsoft Edge.

Answer 4

I think this is easier to understand.

 *{ margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif; } .titulo{ text-align: center; margin: 2em; } .padre{ margin: 0 auto; display: flex; justify-content: center; align-items: center; margin-top: 10em; position: relative; width: 1000px; height: 500px; } .caja-1{ background-color: black; width: 500px; height: 500px; left: 0; mix-blend-mode: screen; position:absolute; } .caja-3{ width: 500px; height: 500px; display: flex; background-color: white; position: absolute; right: 0; } .texto{ font-size: 5em; color: white; mix-blend-mode: difference; position:absolute; } 

 <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>ESTILOS CONTRASTADOS CSS3</title> </head> <body> <h1 class="titulo">MIX-BLEND-MODE CSS EFFECT</h1> <div class="padre"> <div class="caja-1"></div> <div class="caja-3"></div> <h1 class="texto">CODE STOCK CENTER</h1> </div> </body> </html>