I have three bars of player status, i.e. health, experience, and mana. Health and Mana bars have a normal size and exp bar is minimized.
I apply box-shadow for each of them, styles are almost the same for all bars, however box shadow is not displayed for minimized bar. I tried to fix that and noticed that when I change spread radius to positive value, box shadow appears. If the spread radius is negative, box shadow is not displayed at all.
The code of PARENT element looks this way:
<div className={styles.barContainer}>
<Bar
color={healthBar.color}
height={healthBar.height}
currentValue={healthCurrent}
maxValue={healthMax}
/>
</div>
<div className={classNames(styles.barContainer, styles.barContainerSmall)}>
<Bar
size="small"
color={expBar.color}
height={expBar.height}
currentValue={expCurrent}
maxValue={expMax}
/>
</div>
<div className={styles.barContainer}>
<Bar color={manaBar.color} height={manaBar.height} currentValue={10} maxValue={10} />
</div>
The Bar component looks this way:
<div
className={classNames(styles.bar, {
[styles.smallBar]: size === 'small',
})}
>
<div
className={styles.barInner}
style={{
backgroundColor: color,
width: `${Math.min(widthPercentage, 100)}%`,
}}
/>
{size !== 'small' && (
<span className={styles.text} style={{ fontSize }}>
<span className={styles.biggerNumber}>{currentValue}</span>/<span>{maxValue}</span>
</span>
)}
</div>
And styles for the Bar:
.bar {
position: relative;
background: rgba(255, 255, 255, 0.25);
border-radius: 5px;
height: 10px;
}
.smallBar {
height: 5px;
}
.barInner {
position: absolute;
top: 0;
left: 0;
height: 100%;
border-radius: 4px;
background: linear-gradient(to right, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.5));
transition: 0.4s linear;
transition-property: width;
animation: progressAnimation 0.5s;
box-shadow: 0 4px 4px -4px rgba(0, 0, 0, 0.75);
}
.text {
position: absolute;
top: -3px;
display: flex;
justify-content: center;
align-items: flex-end;
/** TODO: Change font color depending on contrast: https://css-tricks.com/reverse-text-color-mix-blend-mode/ */
color: #fff;
}
.text .biggerNumber {
font-size: 20px;
font-weight: bolder;
}
Based on MDN docs, spread radius has the effect of growing or shrinking box shadows relative to the element's dimensions:
Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink.
Since you're using a spread radius of -4px, this means that the edges of the shadow will be inset 4px from the edges of the element. If your element has insufficient dimensions (i.e. width <8px or height <8px, as 4px * 2 = 8px), the box shadow will not show since it will have a dimension of <0px in either axes.
Here is a proof-of-concept example, using the same box-shadow properties (but I increased the y offset to make it more obvious). Notice that the box shadow will only be rendered at elements of width >=9px:
html, body {
padding: 0;
margin: 0;
}
#stage {
display: flex;
align-items: center;
justify-content: space-around;
height: 100vh;
}
.box {
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
background-color: #ddd;
box-shadow: 0 100px 4px -4px rgba(0, 0, 0, 0.75);
}<div id="stage">
<div class="box"></div>
<div class="box" style="width: 80px;"></div>
<div class="box" style="width: 60px;"></div>
<div class="box" style="width: 40px;"></div>
<div class="box" style="width: 20px;"></div>
<div class="box" style="width: 10px;"></div>
<div class="box" style="width: 9px;"></div>
<!-- No box shadow expected -->
<div class="box" style="width: 8px;"></div>
</div>