Inverted Text Colour Display

INFORMATION & CODE

Inverted Text Colour Display

What the Code Does

This code is a front-end web component that demonstrates a dynamic background and text-inversion effect using HTML, CSS, and JavaScript. It features a navigation box with three buttons ("Default", "Red Background", and "Green Background") that allow users to switch between different themed sections on the page. Each section utilizes a split-color background gradient (divided down the middle) and showcases CSS blending techniques—specifically using mix-blend-mode and filter: invert(1) — to dynamically invert the text colors as they sit across contrasting background halves.

How The Code Works

The code works by leveraging CSS classes to control layout and visibility. In the HTML document, the page is structured with a button container (.link_box) and three wrapper divs (.invert_wrapper) representing the black, red, and green themes, each containing headings with specific styling classes. The CSS styles these elements using a grid layout for the buttons, custom linear gradients for the backgrounds, and blending properties for the headings to create a striking visual contrast. By default, the wrapper divs are hidden (display: none), except for the one possessing an .active class.

JavaScript drives the interactivity of the page by listening for user actions. When the window loads, the script automatically applies the .active class to the first theme section, making it visible. It then loops through all the color buttons, attaching a click event listener to each. When a user clicks a button, the script removes the .active class from the currently displayed section, updates the active index, and applies the .active class to the newly selected theme wrapper, seamlessly swapping the displayed content on the screen.

How to Use the Code

To use this code, you simply need to combine the HTML, CSS, and JavaScript into a fully functioning web page. Place the HTML code inside the <body> tags of an HTML5 document, insert the CSS code inside a <style> tag in the <head> section (or link it via an external stylesheet .css file), and place the JavaScript code inside a <script> tag just before the closing </body> tag (or in an external .js file). Once opened in a browser, you can click the top navigation buttons to instantly toggle between the different color-themed sections and observe the inverted text effects.

HTML


                <!doctype html>
<html lang="en/US">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Fixed Footer</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/d9cf1148e3.js" crossorigin></script>
  </head>
  <body>
    <div class="link_box">
      <button type="link" class="colour">Default</button>
      <button type="link" class="colour">Red Background</button>
      <button type="link" class="colour">Green Background</button>
    </div>
    <div class="outer_page">
      <div class="invert_wrapper black">
        <h1 class="h1">Inverted Text Colour</h1>
        <h2 class="h1a">This Title Has An Inverted Colour Change To The Background Colour</h2>
        <h3>Whereas this subtitle does not have an inverted colour change</h3>
      </div>
		  <div class="invert_wrapper red">
        <h1 class="h1">Inverted Text Colour</h1>
        <h2 class="h1a">This Title Has An Inverted Colour Change To The Background Colour</h2>
        <h3>Whereas this subtitle does not have an inverted colour change</h3>
      </div>
		  <div class="invert_wrapper green">
        <h1 class="h1">Inverted Text Colour</h1>
        <h2 class="h1a">This Title Has An Inverted Colour Change To The Background Colour</h2>
        <h3>Whereas this subtitle does not have an inverted colour change</h3>
      </div>
    </div>
    <script src="scripts.js"></script>
  </body>
</html>

CSS


                      .link_box {
        display: grid;
        grid-template-columns: 1fr 2fr 2fr;
        gap: 20px;
        width: 100%;
        max-width: 600px;
        padding: 20px;
        margin: 0 auto 20px auto;
        border: var(--btn-border);
      }

      .colour {
        width: 100%;
        padding: 10px;
        font-family: "Courier New", monospace;
        font-size: 16px;
        font-weight: bold;
      }

      .invert_wrapper.black {
        display: none;
        width: 100%;
        height: auto;
        min-height: 83vh;
        padding: 30px;
        background-image: linear-gradient(to right, #000 50%, #fff, #fff  50%);
      }
      
	  .invert_wrapper.red {
        display: none;
        width: 100%;
        height: auto;
        min-height: 83vh;
        padding: 30px;
        background-image: linear-gradient(to right, #d00 50%, #fff, #fff  50%);
      }
      
      .invert_wrapper.green {
        display: none;
        width: 100%;
        height: auto;
        min-height: 83vh;
        padding: 30px;
        background-image: linear-gradient(to right, #0a0 50%, #fff, #fff  50%);
        background-size: cover;
      }
      
      .active.invert_wrapper {
        display: block;
      }

      .h1 {
        margin-top: 10px;
        margin-left: 8px;
        font-size: 48px;
        letter-spacing: 16px;
        text-shadow: 0 0 2px #888, 2px 2px #888;
        filter: invert(1);
        mix-blend-mode: difference;
        text-align: center;
	    }
      .h1a {
        margin-top: 10vh;
        filter: invert(1);
        mix-blend-mode: difference;
        letter-spacing: 7px;
        text-align: center;
      }
      
	    h3 {
        color: #0000ff;
        text-shadow: 0 0 1px #555555, 2px 2px #555555;
        text-align: center;
	    }

JAVASCRIPT


                var element = 0;
const colorBtn = document.querySelectorAll('.colour');
const invertWrap = document.querySelectorAll('.invert_wrapper');

window.onload = function() {
  invertWrap[element].classList.add('active');
}
      
colorBtn.forEach((colorBtns, index) => {
  colorBtn[index].addEventListener('click', () => {
    invertWrap[element].classList.remove('active');
    element = index;
    invertWrap[index].classList.add('active');
  });
});

MENU

INFORMATION & CODE