const changeBackground = (evt) => {
let {
currentTarget
} = evt, {
value
} = currentTarget,
table = document.querySelector('table');
table.dataset.shadow = value;
}
document.querySelectorAll('input[type=radio]').forEach(
(el) => el.addEventListener('change', changeBackground)
);
document.querySelector('input:checked').dispatchEvent(new Event('change'));
/* removing all default padding and margins, and ensuring
that all elements are sized to include their padding
and border-widths: */
*,
::before,
::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
/* a relatively simple background to show how the transparencies
might be beneficial; otherwise irrelevant to the demo: */
background-image:
repeating-linear-gradient(
to bottom left,
transparent,
hsl(140deg 90% 80% / 0.7)
), radial-gradient(
at 0 0,
hsl(300deg 95% 85% / 1),
hsl(180deg 95% 85% / 1)
);
block-size: 100vh;
padding: 1rem;
}
form {
inline-size: 70%;
margin-block: 1rem;
margin-inline: auto;
}
fieldset {
border: 0 none transparent;
display: flex;
flex-flow: row wrap;
gap: 1rem;
justify-content: space-between;
padding: 1rem;
}
legend {
font-size: 1.2rem;
position: relative;
}
label {
flex-grow: 1;
}
.labelText {
/* using a CSS custom property to simplify the CSS: */
--active-indication: hsl(0deg 75% 70% / 0.55);
background-color: #cccd;
/* using a background-image to give show whether a
selection has, or has not, been made; this is the
default 'inactive' state: */
background-image:
linear-gradient(
270deg,
var(--active-indication) 0 1.5rem,
/* gives the illusion of a border separating the
background-color of the element, and the
'activation'/checked state: */
#0009 1.5rem calc(1.5rem + 1px),
/* transparent, to allow the background to show through: */
transparent calc(1.5rem + 1px)
);
border: 1px solid #0009;
border-radius: 1rem;
display: block;
padding: 0.75rem;
padding-inline-end: 2rem;
}
/* moving the radio inputs off screen to hide them: */
input[type=radio] {
position: absolute;
left: -2000px;
}
/* this selector matches the .labelText that immediately
follows a checked <input>; despite being hidden off-screen
the <input> still precedes the .labelText element in
the DOM: */
input:checked + .labelText {
/* here we update the custom property, which updates
the background-image/linear-gradient: */
--active-indication: hsl(160deg 95% 75% / 1);
}
table {
/* CSS custom properties for various properties to ensure
common styling where appropriate;
--tr-space-between is the size of the percieved/visible
gap between adjacent rows: */
--tr-space-between: 0.5rem;
/* --td-padding-block is derived from the previous variable,
using calc() so that the space between 'rows' is inserted
as padding (padding-block) to create that row-spacing: */
--td-padding-block: calc(var(--tr-space-between)/2);
--shadow-color: #339a;
--row-color: #fff;
--row-inset: 1rem;
/* the desired radius of the 'rows': */
--row-radius: 0.5rem;
/* to ensure page background can be seen (if required)
in the row-gaps: */
background-color: transparent;
/* collapsing the borders between cells in order to allow the
content to be contiguous, and using a different means to
achieve row-"separation": */
border-collapse: collapse;
border-spacing: 0;
margin-block: 1rem;
/* centering the <table> */
margin-inline: auto;
}
/* using attribute-selectors along wtih custom data-* attributes
to appropriately style the <table> based on the choice made as
to the approach: */
table[data-shadow="drop-shadow"] {
/* using a CSS filter, drop-shadow(), to create the shadows: */
filter: drop-shadow(0 0 2rem var(--shadow-color));
}
table[data-shadow="box-shadow"] {
/* using a box-shadow, note that this provides a shadow *around*
the element, but not between the 'rows' (this is why I didn't
use box-shadow in the original code, and this is simply to
illustrate that point): */
box-shadow: 0.5rem 0.5rem 2rem var(--shadow-color);
}
table[data-shadow="backdrop-filter"] {
/* this allows a number of different functions to be used to
to style the view of whatever is visible "through" the
background of the <table> element: */
backdrop-filter: hue-rotate(245deg) opacity(0.4);
}
td,
th {
min-width: 170px;
}
td,
th {
/* again to ensure that the page background is - where
appropriate - visible through the visual gaps: */
background-color: transparent;
}
td {
/* setting the cell padding on the block axis, to "separate"
the "rows", while no padding is applied on the inline
axis, so that the rows are visually contiguous: */
padding-block: var(--td-padding-block);
}
/* using logical properties to set the border radii: */
td:first-child .content {
border-start-start-radius: var(--row-radius);
border-end-start-radius: var(--row-radius);
}
td:last-child .content {
border-start-end-radius: var(--row-radius);
border-end-end-radius: var(--row-radius);
}
td:first-child {
padding-inline-start: var(--row-inset);
}
td:last-child {
padding-inline-end: var(--row-inset);
}
.content {
/* setting the background-color of the "row": */
background-color: var(--row-color);
/* applying padding on all axes, to move the content
away from the edges of the 'row': */
padding: 0.5rem;
}
<main>
<form action="#" id="choices" method="post">
<fieldset>
<legend>Choose approach</legend>
<label>
<input type="radio" name="shadowType" value="drop-shadow" checked>
<span class="labelText"><code>filter: drop-shadow()</code></span>
</label>
<label>
<input type="radio" name="shadowType" value="box-shadow" >
<span class="labelText"><code>box-shadow</code></span>
</label>
<label>
<input type="radio" name="shadowType" value="backdrop-filter" >
<span class="labelText"><code>backdrop-filter</code></span>
</label>
</fieldset>
</form>
<table>
<thead>
<tr>
<th>head</th>
<th>head</th>
<th>head</th>
</tr>
</thead>
<tbody>
<!-- I've changed the class-name of the <div> from 'shadow' to
'content' to reflect what the "purpose" of the element: -->
<tr>
<td>
<div class="content">div</div>
</td>
<td>
<div class="content">div</div>
</td>
<td>
<div class="content">div</div>
</td>
</tr>
<tr>
<td>
<div class="content">div</div>
</td>
<td>
<div class="content">div</div>
</td>
<td>
<div class="content">div</div>
</td>
</tr>
<tr>
<td>
<div class="content">div</div>
</td>
<td>
<div class="content">div</div>
</td>
<td>
<div class="content">div</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>foot</td>
<td>foot</td>
<td>foot</td>
</tr>
</tfoot>
</table>
</main>
