CSS technique for changing text color according to background
The concept is to replicate the information in two tiers, namely the back and the front. The back and front layers exhibit distinct background and text hues. This approach offers the benefit of effortless centering of the text, and an uncomplicated selection of colors.
Invert text color based on background in css
I possess a blue grid with various shades, and each shade has corresponding text. I require the text to be in a contrasting color depending on the background; white for dark backgrounds and the opposite for light backgrounds. The current setup is as follows:
color: #333; isolation: isolate; mix-blend-mode: difference; Is there a CSS-only (less-only) solution to invert the text color exclusively without altering the bizarre orangy grey background colour hue of the elements?
Customize the appearance of the text by applying different effects. For instance, you may choose to set the text color to transparent and then alter it by using background-clip to invert the color or filter to grayscale the color. This will modify the way the text appears over transparent backgrounds.
Explore a comprehensive breakdown of the different outcomes you can attain through this approach by visiting methods for contrasting text against backgrounds.
Based on your situation, it appears that you are seeking for something similar to this:
You can also utilize this formatting on the specific element you wish to change the color scheme of.
filter: invert(1); mix-blend-mode: difference; It is particularly effective when you want to differentiate between a distant child or element, rather than a nearby parent or element.
The custom cursor I employed while using it was a black circle that created a striking contrast with the background elements. Check out this sample pen at https://codepen.io/m3t4lch7/pen/VwwOKNd.
Invert() — CSS: Cascading Style Sheets, The invert () CSS function inverts the color samples in the input image. Its result is a
Invert CSS font-color depending on background-color
Can the font-color be inverted based on the background-color using a CSS property, as shown in the picture?
The mix-blend-mode CSS property is not compatible with IE. To support IE, I suggest utilizing pseudo elements or alternatively, two DIVs can be used for IE6 and IE7 support.
.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
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
Although this question has been asked before, I thought I would share an additional solution that I have been utilizing prior to discovering mix-blend-mode .
The concept involves duplicating the information in two layers — the front and the back. While both layers have identical dimensions and text, they differ in terms of their background and text colors. To achieve the desired width, a clipping box div is utilized to crop the top layer (i.e., front), which reveals the unclipped front layer and exposes the back layer outside the clipping window.
The approach employed here is akin to the «Two div» method given in the accepted response. However, it entails an added clipping box. The key benefit of this method is that it enables effortless text centering and straightforward color selection.
.progress < display: block; margin: 0; /* Choose desired padding/height in coordination with font size */ padding: 10px; height: 28px; >#back < 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; >#front < position: absolute; left: 0; top: 0; /* Choose the desired background and text colors */ background-color: navy; color: white; >#boundbox
To ensure consistency between the front and back, I utilize jQuery to set the percentage progress programmatically while also ensuring that their widths and text are identical. Alternatively, achieving the same effect is also achievable using pure Javascript.
// Set *front* width to *back* width // Do this after DOM is ready $('#front').width($('#back').width()) // Based upon an event that determines a content change // you can set the text as in the below example percent_complete = 45 // obtain this value from somewhere; 45 is just a test $('#front').text(percent_complete.toString() + '% complete') $('#back span').text($('#front').text()) bb_width = (percent_complete * $('#back').width())/100 $('#boundbox').css('width', bb_width.toString()) And here’s a fiddle: Progress bar.
I have tried this on Chrome, Firefox, Microsoft Edge, and Internet Explorer 11.
In my opinion, this is easier to comprehend.
* < 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
MIX-BLEND-MODE CSS EFFECT CODE STOCK CENTER
Css — How to invert stroke text color depending on, My goal is to invert the colors but to keep the colors of the divs. This is a codepen file, I have tried to keep it as simple as possible: One idea is to …
How to invert colors using CSS on hover
My goal is to create interactive cart buttons using CSS styles. Specifically, when the user hovers over the «add to cart» button, I would like it to transition to a black and white color scheme in order to improve the user’s experience.
.ryanAddButton < display: inline-block; padding: 8px 0px; width: 390px; background: -moz-linear-gradient(#000, #000); background: -o-linear-gradient(#000, #000); background: -webkit-linear-gradient(#000, #000); background: linear-gradient(#000, #000); color: #fff; font: normal 700 20px/1 "Calibri", sans-serif; text-align: center; text-shadow: 1px 1px 0 #000; >ryanAddButton:hover
HTML snippet of the button:
Your shorthand code, background , has a gradient that is perceived as background-image . As a result, the hover declaration you made cannot replace this property.
.ryanAddButton < display: inline-block; padding: 8px 0px; width: 390px; /* background: -moz-linear-gradient(#000, #000); background: -o-linear-gradient(#000, #000); background: -webkit-linear-gradient(#000, #000); background: linear-gradient(#000, #000); */ background: black; color: #fff; font: normal 700 20px/1"Calibri", sans-serif; text-align: center; text-shadow: 1px 1px 0 #000; >.ryanAddButton:hover
Initially, a minor error is present in your CSS.
Here’s a straightforward solution, suitable for someone without specialized knowledge:
In addition, Paulie_D’s response is accurate. As an alternative perspective, when utilizing the background attribute, why not modify it on hover as well?
.ryanAddButton < display: inline-block; padding: 8px 0px; width: 390px; background: -moz-linear-gradient(#000, #000); background: -o-linear-gradient(#000, #000); background: -webkit-linear-gradient(#000, #000); background: linear-gradient(#000, #000); color: #fff; font: normal 700 20px/1"Calibri", sans-serif; text-align: center; text-shadow: 1px 1px 0 #000; >.ryanAddButton:hover
Alternative 2: (An improved option — the perspective of a designer/programmer):
The linear gradient in your background property is unnecessary as both colors are identical, rendering the linear gradient redundant. Rather, consider using the background-color property to obtain the color. This eliminates the need for vendor prefixes and offers better browser support for older versions.
Simultaneously, it condenses multiple lines of code into a single line.
Modify the «.ryanAddButton» background gradient to black, and ensure to include the class dot in «ryanAddButton:hover», that is, it should be «.ryanAddButton:hover».
The gradient in your background overlays the color behind it. As a result, altering the background color won’t be visible. To eliminate the gradient and set the background color, you can use the background property.
Your hover selector lacks a . .
.ryanAddButton .ryanAddButton:hover
CSS | invert() Function, The invert () function internally uses the following formula, to computer the inverse of the image: amount * (255 — value) + (1 — amount) * value. …
Reverse Text Color Based on Background Color Automatically in CSS
Over the weekend I noticed an interesting design for a progress meter in a videogame. The % complete was listed in text in the middle of the bar and didn’t move. But that text was the same color as the background of the bar that was filling up from left to right. It seemed like the background was going to make the text invisible once they overlapped, but instead, the text color reversed to be white instead anywhere it overlapped with the background. My first thought was this: how can we replicate this design pattern and what might we learn along the way? Here’s what I came up with, but make sure to check this demo on the latest version of Chrome to see everything working correctly: See the Pen A pure CSS loading bar by Robin Rendle (@robinrendle) on CodePen. Pretty cool, huh? This is possible with the awesome magic of mix-blend-mode in CSS.
Let’s take a look at the markup first
The .wrapper will hold our elements in place, .bg will be our loading bar that increases over time and our .text element will be used as the percentage information.
Let’s make the whole thing CSS-only
A “real” loader on the web would likely be powered by JavaScript and reacting to actual data somehow. But while we’re having fun here, let’s make the whole thing, even the counting, happen just in CSS (SCSS for the looping help). We’ll set up our variables and style the .bg element:
$loadingTime: 10s; $color: rgb(255, 0, 0); .bg
Perhaps we could have hidden the overflow and moved the background box with transform property instead (for performance reasons) but in this little demo I think it’s fine to animate the width property alone. To update the content of the .text element with the correct percentage value we have to be a little dastardly and use a mix of pseudo elements and animations. First we’ll keep the empty set the content of its after pseudo element to 0% before defining an animation:
So what we want to do with the percentage animation above is update our content property with each value from 1 to 100, like this:
@keyframes percentage < 0% < content: "0%"; >1% < content: "1%"; >/* . */ 100% < content: "100%"; >>But instead of making all those @keyframe selectors by hand we can familiarise ourselves with the @for loop syntax in Sass:
If this looks a little scary then not to worry! On the third line we add whichever number is currently in the loop (which we call $i ) and make that a string by appending % to it and assigning it to a variable. Then we can use interpolation to make each @keyframe selector update the content property to the right value.
Finally, all we have to do is set the color and the mix-blend-mode of our pseudo element and there we go; a pure CSS loader where the background color influences the foreground text:
See the Pen A pure CSS loading bar by Robin Rendle (@robinrendle) on CodePen. With the difference blend mode we have to set the text element’s color value to the opposite of the background. So if our background is rgb(0, 0, 0) we’ll need to set the text pseudo element to rgb(255, 255, 255) . I think this little demo helps us recognise how useful the mix-blend-mode property can be. There are going to be all sorts of instances like this in the future where interfaces can reveal information in ways we’d never have thought possible before.
Changing Text Color Entirely
The cool part of this technique is the fact that some of the text is one color and other parts of the text is another color. The reversing happens just based on what is covered and what isn’t, even if it’s just a part of a letter. If you were looking for more of an accessibility-based “change the text color to make sure it has enough contrast” thing, Sass can also help with that.
The XOXO site used mix-blend-mode: darken; quite a bit to to have backgrounds, shapes, and text all interact in subtle/interesting/beautiful ways that we haven’t seen a whole lot on the web yet.
The mix-blend-mode property isn’t well supported at the moment and neither is the animatable content property. So make sure to provide fallbacks if you decide to use either of these tricks.