Design a gradient backdrop resembling a duo of bars for a visually appealing effect

Question

Design a gradient backdrop resembling a duo of bars for a visually appealing effect

Looking to create a unique background effect that resembles two progress bars as shown in this image: https://i.sstatic.net/LpENZ.png

I know how to create one progress bar using linear gradients, but I'm wondering if there's a way to split the background into two halves and have both stop at a specific percentage?

<!DOCTYPE html>
<html>
  <head>
  <style> 
      #example1 {
         background-color: transparent;
         background-image: linear-gradient(90deg, #eceddc 25%, transparent 25%),
         linear-gradient(180deg, #eceddc 50%, transparent 25%),
         linear-gradient(90deg, #eceddc 50%, transparent 25%); 
      }
  </style>
</head>
<body>
  <div id="example1">
     <h1>Lorem Ipsum Dolor</h1>
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  </div>
</body>
</html>

html css linear-gradients

Answer 1

Answer №1

To achieve a result similar to the image shown, you can implement the code snippet below:

<!DOCTYPE html>
<html>
<head>
<style> 
#example1 {
background-color: transparent;
background-image: linear-gradient(to right, #eceddc 75%, white 25%),
linear-gradient(to right, #eceddc 25%, white 25%);
background-position: right top, right bottom;
background-repeat: no-repeat, no-repeat;
background-size: 100% 50%, 100% 100%;
}
</style>
</head>
<body>

<div id="example1">
  <h1>Lorem Ipsum Dolor</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

</body>
</html>

Answer 2

To achieve a result similar to the image shown, you can implement the code snippet below:

<!DOCTYPE html>
<html>
<head>
<style> 
#example1 {
background-color: transparent;
background-image: linear-gradient(to right, #eceddc 75%, white 25%),
linear-gradient(to right, #eceddc 25%, white 25%);
background-position: right top, right bottom;
background-repeat: no-repeat, no-repeat;
background-size: 100% 50%, 100% 100%;
}
</style>
</head>
<body>

<div id="example1">
  <h1>Lorem Ipsum Dolor</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

</body>
</html>

Answer 3

Answer №2

To achieve the desired effect, follow these steps:

#example1 {
  background: 
      linear-gradient(#eceddc 0 0) top    left,
      linear-gradient(#eceddc 0 0) bottom left;
  background-size:
    80% 30%, /* width height of the first bar  */
    40% 70%; /* width height of the second bar */
  background-repeat:no-repeat;
}

<div id="example1">
  <h1>Lorem Ipsum Dolor</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

Answer 4

To achieve the desired effect, follow these steps:

#example1 {
  background: 
      linear-gradient(#eceddc 0 0) top    left,
      linear-gradient(#eceddc 0 0) bottom left;
  background-size:
    80% 30%, /* width height of the first bar  */
    40% 70%; /* width height of the second bar */
  background-repeat:no-repeat;
}

<div id="example1">
  <h1>Lorem Ipsum Dolor</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

Answer 5

Answer №3

To achieve the desired background image effect, you can create two DIVs and customize them with gradients. After styling, add these DIVs as children to a parent div that contains the text elements. Then, set the text elements to position: relative with a z-index of 10.

In case the element moves on the page, utilize Javascript to determine the position of the parent element using a handler function. Create two eventListeners for load and scroll events. Invoke the handler function with the listeners to reposition the background elements in sync with the text elements during load and scroll actions.

UPDATE: I incorporated JavaScript to obtain the height and width of the text elements' div using (offsetHeight & offsetWidth). The height and width of each BG div are now dynamically adjusted based on the height of the text div, enhancing flexibility.

window.addEventListener('load', handler, false);
window.addEventListener('scroll', handler, false);
let exOne = document.getElementById('example1');
let exTwo = document.getElementById('example2');
let exThree = document.getElementById('example3');

function handler(event) {

  function getOffset(el) {
    const rect = el.getBoundingClientRect();
    return {
      left: rect.left + window.scrollX,
      top: rect.top + window.scrollY
    };
  }
  exTwo.style.top = getOffset(exOne).top + "px";
  exTwo.style.left = getOffset(exOne).left + "px";
  exTwo.style.height = exOne.offsetHeight + "px";
  exTwo.style.width = exOne.offsetWidth + "px";
  exTwo.style.display = "block";
  exThree.style.top = getOffset(exOne).top + "px";
  exThree.style.left = getOffset(exOne).left + "px";
  exThree.style.height = exOne.offsetHeight / 1.75 + "px";
  exThree.style.width = exOne.offsetWidth + "px";
  exThree.style.display = "block";
}

#example1 {
  background-color: transparent;
  padding: 10px;
}

#example1 p,
#example1 h1 {
  z-index: 10;
  position: relative;
}

#example2 {
  background-color: transparent;
  background: linear-gradient(to top, #0FF 51%, transparent 25%), linear-gradient(to left, #0FF 51%, transparent 25%);
  position: absolute;
  z-index: 1;
  /* display none to remove any glitches shown before load 
  add back to block in JS after load*/
  display: none;
}

#example3 {
  background-color: transparent;
  background: linear-gradient(to bottom, #eceddc 51%, transparent 25%), linear-gradient(to right, #eceddc 51%, transparent 25%);
  position: absolute;
  z-index: 1;
  /* display none to remove any glitches shown before load 
  add back to block in JS after load*/
  display: none;
}

Scroll down
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="example1">
  <div id="example2"></div>
  <div id="example3"></div>
  <h1>Lorem Ipsum Dolor</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

Answer 6

To achieve the desired background image effect, you can create two DIVs and customize them with gradients. After styling, add these DIVs as children to a parent div that contains the text elements. Then, set the text elements to position: relative with a z-index of 10.

In case the element moves on the page, utilize Javascript to determine the position of the parent element using a handler function. Create two eventListeners for load and scroll events. Invoke the handler function with the listeners to reposition the background elements in sync with the text elements during load and scroll actions.

UPDATE: I incorporated JavaScript to obtain the height and width of the text elements' div using (offsetHeight & offsetWidth). The height and width of each BG div are now dynamically adjusted based on the height of the text div, enhancing flexibility.

window.addEventListener('load', handler, false);
window.addEventListener('scroll', handler, false);
let exOne = document.getElementById('example1');
let exTwo = document.getElementById('example2');
let exThree = document.getElementById('example3');

function handler(event) {

  function getOffset(el) {
    const rect = el.getBoundingClientRect();
    return {
      left: rect.left + window.scrollX,
      top: rect.top + window.scrollY
    };
  }
  exTwo.style.top = getOffset(exOne).top + "px";
  exTwo.style.left = getOffset(exOne).left + "px";
  exTwo.style.height = exOne.offsetHeight + "px";
  exTwo.style.width = exOne.offsetWidth + "px";
  exTwo.style.display = "block";
  exThree.style.top = getOffset(exOne).top + "px";
  exThree.style.left = getOffset(exOne).left + "px";
  exThree.style.height = exOne.offsetHeight / 1.75 + "px";
  exThree.style.width = exOne.offsetWidth + "px";
  exThree.style.display = "block";
}

#example1 {
  background-color: transparent;
  padding: 10px;
}

#example1 p,
#example1 h1 {
  z-index: 10;
  position: relative;
}

#example2 {
  background-color: transparent;
  background: linear-gradient(to top, #0FF 51%, transparent 25%), linear-gradient(to left, #0FF 51%, transparent 25%);
  position: absolute;
  z-index: 1;
  /* display none to remove any glitches shown before load 
  add back to block in JS after load*/
  display: none;
}

#example3 {
  background-color: transparent;
  background: linear-gradient(to bottom, #eceddc 51%, transparent 25%), linear-gradient(to right, #eceddc 51%, transparent 25%);
  position: absolute;
  z-index: 1;
  /* display none to remove any glitches shown before load 
  add back to block in JS after load*/
  display: none;
}

Scroll down
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="example1">
  <div id="example2"></div>
  <div id="example3"></div>
  <h1>Lorem Ipsum Dolor</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

Design a gradient backdrop resembling a duo of bars for a visually appealing effect

Answer №1

Answer №2

Answer №3

Similar questions

In IE8, the section cannot extend to full width

Looking for a smart way to extract all the selected elements from a form?

Tips for adjusting the progress bar to 100% and back to 0%

Allowing scroll events to flow through from a child <div> to <canvas> in Excalidraw

Could it be that this is a mysterious foreign alphabet or a problem with the encoding?

Displaying CSS image slideshow images side by side

Prevent elements from overlapping within a flexbox container

revealing the excessive vertical space in the div upon clicking the link

How can I align the menu to the right in the navbar using Bootstrap 4?

How can I import HTML files using PHP?

Can you guide me on creating a horizontal scrolling feature using HTML, CSS, and React?

What could be causing my chessboard to not wrap around properly with flexbox?

positioning a text input in the center instead of at the top of the page

Interacting with JSP through session management

What is the reason behind the error message in Bokeh?

Utilizing ng-href in Angular.js Template: A Guide

What is the best way to enlarge a Material UI card?

Utilizing Bootstrap for Proper Alignment of "Link" and "Label"

Is it possible to have the website show up at a default size of 90% on the display

Add a symbol at the end of the input that signifies its value