Dynamic Background with CSS Variable

Dynamic Background with CSS Variable

Posted by admin at September 29, 2019

The var() CSS function can be used to insert the value of a custom property (sometimes called a “CSS variable”) instead of any part of a value of another property.

We will use the document.documentElement to get the variable name and manipulate the color of the background.

Here is the completed design of the page. Hover over the colors button to effects

Navbar

Color change

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatibus reiciendis aut pariatur voluptates doloribus blanditiis qui consequatur, ullam, dolorem vitae corrupti labore optio ipsa, rem necessitatibus! Dolore eius cum perspiciatis esse suscipit? Delectus dolore dignissimos at omnis illum consequatur excepturi incidunt? Nam, sed. Cumque maxime, possimus sint enim facilis dignissimos!


Step 1: Create index.html file.

<!DOCTYPE html>
<html lang="en">
  <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" />
    <link rel="stylesheet" href="style.css" />
    <title>Navbar</title>
  </head>
  <body>
    <div class="navbar">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li class="dropdown">
          <a href="#">Colors</a>
          <ul>
            <li>
              <a href="#" style="background: red;" onclick="changeColor('red')"
                >R</a
              >
            </li>
            <li>
              <a
                href="#"
                style="background: green;"
                onclick="changeColor('green')"
                >G</a
              >
            </li>
            <li>
              <a
                href="#"
                style="background: blue;"
                onclick="changeColor('blue')"
                >B</a
              >
            </li>
            <li>
              <a
                href="#"
                style="background: lime;"
                onclick="changeColor('lime')"
                >L</a
              >
            </li>
          </ul>
        </li>
      </ul>
    </div>

    <script src="script.js"></script>
  </body>
</html>

Step 2: Create style.css file

:root {
  --backgroundColor: #ccc;
}

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--backgroundColor);
}
.navbar {
  margin-top: 0;
  color: #fff;
  background-color: #444;
  width: 100%;
}
.navbar ul li {
  display: inline-block;
  list-style-type: none;
  padding: 12px 10px;
}
.navbar ul li a {
  padding: 10px 12px;
  color: #fff;
  text-decoration: none;
}
.dropdown {
  position: relative;
}
.dropdown ul li:first-child {
  margin-top: 15px;
}
.dropdown ul li a {
  border-radius: 100%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.dropdown ul {
  display: none;
}
.dropdown:hover ul {
  display: block;
  position: absolute;
}
.dropdown ul li a:hover {
  box-shadow: 0 12px 10px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

Create script.js file

function changeColor(color) {
  document.documentElement.style.setProperty("--backgroundColor", color);
}

Comments

  • Write a Reply or Comment

    Your email address will not be published. Required fields are marked *