Using this useful but little-known CSS attribute, you can solve an everyday color-clash problem. When managing the page, you’ll frequently come across a color mix-up with stationary website items like logos. See how to change font color in CSS while scrolling, this effect with only CSS and no JavaScript! This can occur if a static element is placed over an area of the web page that has the same color as the element.
While it is resting on that background, the unchanging element will be invisible. To resolve this problem, you must dynamically flip the logo’s color when it is above a component of the same color.
How to Change Font Color in CSS While Scrolling
Open index.html in a browser, which should display the following page:
A logo and four sections are provided on the HTML page. Each part contains an imaginary title plus three sections of imaginary material. The text in the logo is identically black as the background in both the third and fourth portions. The nth-child(even) section in styles.css is responsible for this effect, which provides the black background to all even parts.
Making the Logo Sticky
The logo cannot be attached to the top of the page with this beginning code. It suggests that as you move down the page, the brand image appears. Apply the position: sticky attribute to your logo within the CSS code to make it a sticky header. Read our post about the CSS location property for a detailed look into position in CSS.
Make sure the logo is at the top, but only on larger screens (lower screen sizes can cause it to cover other items). This effect is achieved using the HTML responsive media query:
<!-- How to Change Font Color in CSS -->
@media (width > 980px) {
.logo {
position: sticky;
top: 0.5rem;
}
}
The logo is now constantly at the top of the page and follows them as you scroll. But you’ll note that the content appears as you browse into the dark backdrop parts (due to the fact that the logo lettering is likewise black). Now consider how to correct this.
Adding mix-blend-mode to Your Sticky Header
To make sure that the black logo is not lost on black backgrounds, invert the color dynamically. You’d achieve this by utilizing the mix-blend-mode CSS element and setting it to difference:
<!-- How to Change Font Color in CSS -->
@media (width > 980px) {
.logo {
position: sticky;
top: 0.5rem;
mix-blend-mode: difference;
}
}
The mix-blend-mode CSS attribute describes how the text of an element must blend into the content of its child and background. The various value reverses the light colors via the variance in the value of each pixel. If the color numbers are the same, the result is black. Differences in value can lead the values to invert.
The above CSS change will entirely hide the logo. This is due to the fact that you didn’t change the color of the logo language beyond the media query to white. Use the following code to achieve this:
.logo {
color: white;
/* Other CSS properties */
}
You have now successfully installed everything. Slide down the page till you reach the black backdrop. The logo would change from black to white.
You are able to work with colors other than black and white. For example, changing the color of your logo lettering to teal (#008080) will result in a pink color on white backdrops. This is shown in the graphic below.
For the greatest impact, your element should be white in most situations. In addition, when you scroll to the top, your logo may be cut in half. This is a result of the fact that the logo resides outside of the <section> element. To display the logo completely, change the background color of the body> component to white.
Creating a logo with an image rather than text
This approach can be used with both text and images. You must, of course, ensure that the company name is white. The example that follows uses a white lorem ipsum logo, which may be located in the same folder as the index.html file:
The color of the logo picture is going to be black on white, as shown in the example below.
If you move to a black background, the colored logo will turn white. The graphic below shows this.
You may also make the logo larger by altering the font size with the width and height variables in the CSS element which targets the logo. After all, you are no longer interacting with text but with an interface that is graphical.
<!-- How to Change Font Color in CSS -->
.logo {
color: white;
width: 10rem;
/* Other CSS properties */
}
When you reduce the size of the screen, the media query no longer works. This will disable the various blend modes, causing your logo to disappear. To restore the logo to its original page, set your mix-blend-mode link on the logo beyond the media query:
<!-- How to Change Font Color in CSS -->
.logo {
color: white;
width: 10rem;
mix-blend-mode: difference;
/* Other CSS properties */
}
This will always enable mixed merging on the logo, regardless of larger screens. However, on tiny screens, the logo will stay at the top and won’t follow you as you scroll down (since position: sticky only works on large Screens). Finally, remember to always use a white logo to keep it from escaping from the page.
You can also check: Create a Responsive Navigation Bar Using HTML and CSS
More CSS Hints and Tricks
You can make unique layouts with alternate colors by utilizing the mix-blend mode. Even better, because the mix-blend mode inverts the color dynamically, you have no need to hard encode any colors or establish breaks. It allows you to make lovely blends and colors for different areas of an element’s contents based on its obvious background. In this post, you better know how to change font color in CSS while scrolling.
CSS is often recognized as one of the most amazing programming languages to learn. This is due in part to CSS’s number of tips and techniques, such as the one you just acquired in this article. Hover effects, reducing images to fit inside containers, reducing text with ellipses, and using font transform are some more useful CSS tips and tricks.