I have a bunch of pill-like items that have flexed elements inside. I’d like to wrap the entire "pill" in a box-shadow, but I’m fighting the block
y div that defines the flex.
I’ve tried playing with inline-flex
inside individual div
s, but that broke the uniformity of each "pill" having the same width for each section.
In the code below, I have two examples of what I’ve tried with the box shadow: attaching it to the flex container and attaching it to the individual flex items.
https://codepen.io/rewing/pen/oNdZNxb
HTML and CSS
.box-shadow-test-1 {
-webkit-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.75);
border-radius: 10px;
}
.box-shadow-test-2>div {
-webkit-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.75);
}
.thing {
display: flex;
gap: 0;
margin-bottom: 10px;
font-size: 14px;
cursor: default;
}
.thing > div {
padding: 10px;
border-top: 1px solid #666;
border-bottom: 1px solid #666;
}
.thing .indicator {
border-left: 1px solid #666;
border-right: 1px solid #666;
}
.thing .left-indicator {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
padding-top: 18px;
flex-basis: 13px;
}
.thing .left-indicator.state-1 {
background-color: #bff2c6;
}
.thing .left-indicator.state-2 {
background-color: #AAA;
}
.thing .left-indicator.state-3 {
background-color: #bff2c6;
}
.thing .left-indicator.state-4 {
background-color: #ff8989;
}
.thing .name {
background-color: #FFFFFF;
flex-basis: 195px;
}
.thing .change {
background-color: #FFFFFF;
flex-basis: 135px;
padding-top: 18px;
}
.thing .right-indicator {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
padding-top: 18px;
}
.thing .right-indicator.state-1 {
background-color: #bff2c6;
cursor: pointer;
}
.thing .right-indicator.state-1:hover {
background-color: #A6D9AD;
}
.thing .right-indicator.state-2 {
background-color: #AAA;
}
.thing .right-indicator.state-3 {
background-color: #fcf95c;
cursor: pointer;
}
.thing .right-indicator.state-3:hover {
background-color: #E3E043;
}
.thing .right-indicator.state-4 {
background-color: #FFFFFF;
}
<div class="things">
<div class="cluster">
<div class="thing box-shadow-test-1">
<div class="indicator left-indicator state-2"> </div>
<div class="name">Name 1</div>
<div class="change">Property 1</div>
<div class="indicator right-indicator state-2">state-2</div>
</div>
<div class="thing thing-2 box-shadow-test-2">
<div class="indicator left-indicator state-2"> </div>
<div class="name">Name 2</div>
<div class="change">Property 1</div>
<div class="indicator right-indicator state-2">state-2</div>
</div>
<div class="thing thing-3">
<div class="indicator left-indicator state-3"> </div>
<div class="name">Name 3</div>
<div class="change">Property 1</div>
<div class="indicator right-indicator state-3">state-3 longer</div>
</div>
<div class="thing thing-4">
<div class="indicator left-indicator state-4"> </div>
<div class="name">Name 4</div>
<div class="change">Property 1</div>
<div class="indicator right-indicator state-4">state-4 short</div>
</div>
</div>
</div>
Edit:
For clarification, the third box shadow’d pill in this list is what I’m trying to create. The first attempt is wrapped around the block
y div, the second attempt shows the box-shadow inside the pill itself, but the third (photoshopped) pill has the box-shadow only around the outside of the flex container.
2
Answers
One approach is as below, with explanatory comments in the code:
JS Fiddle demo.
References:
drop-shadow()
function.filter()
.Try adding filter: drop-shadow(0 0 3px rgb(0 0 0 / 75%)); in the .thing-3 class