Adjust the width of a box-shadow using percentage values in CSS

Question

Adjust the width of a box-shadow using percentage values in CSS

As we work on developing our tool according to the provided design, we are facing a challenge in drawing a line within a table row using box-shadow. The requirement is to have the line cover only 30% of the row width, rather than spanning across the entire row.

We attempted to use the "width" property but faced difficulties in achieving the desired outcome.

For reference, here is the jsfiddle link showcasing our current implementation: https://jsfiddle.net/7va8t56z/4/

Below is the snippet of how we are applying the shadow to draw the line:

tbody tr { 
    box-shadow: inset 1px 2px 1px 0px rgb(82, 243, 109);
}

Is it possible to adjust the width of the green line without altering the overall length of the table or row? We aim to modify only the box-shadow width.

Here is a visual representation of the desired outcome: https://i.stack.imgur.com/sjMGJ.png

Thank you for your assistance.

html css

Answer 1

Answer №1

If you're looking to enhance the first two columns only, you may want to consider using this style:

table { 
  border-spacing: 0;
}

tbody tr td:nth-child(1) {
  box-shadow: inset 1px 2px 0px 0px rgb(82, 243, 109);
}

tbody tr td:nth-child(2) {
  box-shadow: inset 0px 2px 0px 0px rgb(82, 243, 109);
}

Answer 2

If you're looking to enhance the first two columns only, you may want to consider using this style:

table { 
  border-spacing: 0;
}

tbody tr td:nth-child(1) {
  box-shadow: inset 1px 2px 0px 0px rgb(82, 243, 109);
}

tbody tr td:nth-child(2) {
  box-shadow: inset 0px 2px 0px 0px rgb(82, 243, 109);
}

Answer 3

Answer №2

When working with the box-shadow property as your best option, consider implementing multiple shadows for added effect.

table tr { 
  box-shadow: 
   /* In order to create a more dynamic visual effect, set the first shadow
   with a color that matches your background and adjust the initial values accordingly */
   inset -30vw -8px 0 10px #1a234b,
   inset -3px 2px 0 4px rgba(64, 210, 88)
}

Answer 4

When working with the box-shadow property as your best option, consider implementing multiple shadows for added effect.

table tr { 
  box-shadow: 
   /* In order to create a more dynamic visual effect, set the first shadow
   with a color that matches your background and adjust the initial values accordingly */
   inset -30vw -8px 0 10px #1a234b,
   inset -3px 2px 0 4px rgba(64, 210, 88)
}

Answer 5

Answer №3

If you're looking for a solution, I recommend this approach, complete with detailed explanations in both the CSS and JavaScript code snippets:

// We begin by selecting the first/only <button> element and adding an event listener to handle the 'click' event:
document.querySelector('button').addEventListener('click',
  // Inside the function, we locate the <tbody> element within the document and use Element.classList API to toggle the 'showHighlight' class on it:
  () => document.querySelector('tbody').classList.toggle('showHighlight')
);

body.dark-layout {
  background-color: #161d31;
  color: #fff;
}

/* To position the "highlighting" relative to the <tr> size rather than the <td> elements, we add position: relative to the <tr>: */
tbody tr {
  position: relative;
}

/* Using the "showHighlight" class-name as part of the selector ensures that the highlight appears only when the class is present. Adjust the inline-size to your preference: */
tbody.showHighlight tr td:first-child::before {
  /* Styling the borders and creating the desired half-shadow effect: */
  border: 2px solid hsl(120deg 60% 50% / 1);
  border-block-end-color: transparent;
  border-inline-end-color: transparent;
  content: '';
  block-size: 100%;
  inline-size: 30%; /* This can be adjusted */
  pointer-events: none;
  position: absolute;
}

<body class="dark-layout">
  <!-- Added button for toggling highlight applied: -->
  <button id="toggleHighlight">Toggle highlight</button>
  <table style="width: 100%;">
    <thead role="rowgroup">
      ...
    </table>

</body>

Check out the JS Fiddle demo here.

If you want to experiment more, here is another version with additional features:

...

// Adding event listener for input changes to dynamically update styles:
document.querySelector('form').addEventListener('input', (evt) => {
  let tbody = document.querySelector('tbody'),
    color = document.querySelector('input[type=color]'),
    inlineSize = document.querySelector('input[type=range]');
  [color, inlineSize].forEach(
    (el) => {
      let output = el.closest('label').querySelector('output');
      tbody.style.setProperty(`--${el.name}`, isNaN(el.value) ? el.value : `${el.value}%`);
      if (output) {
        output.textContent = el.value;
      }
    });
});

*,
::before,
 ::after {
  ...
}

@media screen and (width <=880px) {
  label {
    align-items: center;
    flex-direction: column;
    justify-content: start;
  }
  ...
}

...
  <form action="#">
    <fieldset>
      <label>
        <span class="labelText">Select highlight color:</span>
        <input name="color" type="color" value="#32CD32">
      </label>
      ...

</body>

Explore the updated JS Fiddle demo here.

For further details, refer to the following resources:

CSS:
- background-color.
- ...
JavaScript:
- Arrow functions.
- ...

Answer 6

If you're looking for a solution, I recommend this approach, complete with detailed explanations in both the CSS and JavaScript code snippets:

// We begin by selecting the first/only <button> element and adding an event listener to handle the 'click' event:
document.querySelector('button').addEventListener('click',
  // Inside the function, we locate the <tbody> element within the document and use Element.classList API to toggle the 'showHighlight' class on it:
  () => document.querySelector('tbody').classList.toggle('showHighlight')
);

body.dark-layout {
  background-color: #161d31;
  color: #fff;
}

/* To position the "highlighting" relative to the <tr> size rather than the <td> elements, we add position: relative to the <tr>: */
tbody tr {
  position: relative;
}

/* Using the "showHighlight" class-name as part of the selector ensures that the highlight appears only when the class is present. Adjust the inline-size to your preference: */
tbody.showHighlight tr td:first-child::before {
  /* Styling the borders and creating the desired half-shadow effect: */
  border: 2px solid hsl(120deg 60% 50% / 1);
  border-block-end-color: transparent;
  border-inline-end-color: transparent;
  content: '';
  block-size: 100%;
  inline-size: 30%; /* This can be adjusted */
  pointer-events: none;
  position: absolute;
}

<body class="dark-layout">
  <!-- Added button for toggling highlight applied: -->
  <button id="toggleHighlight">Toggle highlight</button>
  <table style="width: 100%;">
    <thead role="rowgroup">
      ...
    </table>

</body>

Check out the JS Fiddle demo here.

If you want to experiment more, here is another version with additional features:

...

// Adding event listener for input changes to dynamically update styles:
document.querySelector('form').addEventListener('input', (evt) => {
  let tbody = document.querySelector('tbody'),
    color = document.querySelector('input[type=color]'),
    inlineSize = document.querySelector('input[type=range]');
  [color, inlineSize].forEach(
    (el) => {
      let output = el.closest('label').querySelector('output');
      tbody.style.setProperty(`--${el.name}`, isNaN(el.value) ? el.value : `${el.value}%`);
      if (output) {
        output.textContent = el.value;
      }
    });
});

*,
::before,
 ::after {
  ...
}

@media screen and (width <=880px) {
  label {
    align-items: center;
    flex-direction: column;
    justify-content: start;
  }
  ...
}

...
  <form action="#">
    <fieldset>
      <label>
        <span class="labelText">Select highlight color:</span>
        <input name="color" type="color" value="#32CD32">
      </label>
      ...

</body>

Explore the updated JS Fiddle demo here.

For further details, refer to the following resources:

CSS:
- background-color.
- ...
JavaScript:
- Arrow functions.
- ...

Adjust the width of a box-shadow using percentage values in CSS

Answer №1

Answer №2

Answer №3

Similar questions

Cursor or caret bleeding through overlay on Internet Explorer

Is there a way to adjust the font color when the expiration date passes?

Issue with IE11: Flexbox with absolute positioning not sizing correctly, fills entire width instead of individual content

Applying media queries to incorrect screen sizes

What is the best way to incorporate modal window parameters into this code snippet?

I am experiencing a CSS display issue on the mobile version of my map leaflet where only the header and footer are visible

JavaScript has the ability to manipulate the width of an element by using methods to both retrieve

Exploring the latest features in Bootstrap 4 Alpha and enhancing your

p5.js experiencing issue: Uncaught TypeError - Unable to access property 'transpose3x3' due to null value

Issue with Hiding Bootstrap Tabbed Content Correctly

Achieving Perfect Vertical Alignment in Bootstrap 4 Grid Cells

The calculator I designed using HTML, CSS, and JavaScript is experiencing difficulty adjusting to various screen sizes

Creating a static line or separator based on the content using HTML and CSS

Adjust CKEditor's height within Vue.js

The color of the navbar-toggler-icon in Bootstrap cannot be altered

What is Causing The Card to Not Expand?

Guide to center align fields in Ionic and Angular

the background image shivering with movement

Embed a script into an iframe from a separate domain

The webkitTransitionEnd event fires prior to a repaint or reflow occurring