Basically because of how HTML orders elements (the last one has the highest priority over the others) my shadows overlap other elements. If I use z-index on the first element then that is the only one that doesn't overlap, I don't know how to do it for all of them.
This is what I currently have (ignore the shadow size difference, I did it on purpose to see my problem):
This is what I should have:
Here's my code:
CSS:
.timer-container {
font-size: 0;
}
.timer-container .timer {
font-size: 16px;
width: 110px;
height: 170px;
display: inline-block;
background-color: #ffffff;
color: red;
margin: 0 5px;
-webkit-box-shadow: 0 26px 57px 0 rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 26px 57px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 26px 57px 0 rgba(0, 0, 0, 0.2);
}
.timer-container .time {
height: 120px;
font: 4em serif;
border-bottom: 1px solid #bdd9f6;
padding: 15px 0 0;
}
.timer-container .label {
height: 50px;
font: 1.125em serif;
text-transform: uppercase;
}
HTML:
<div class="timer-container">
<div class="timer">
<div class="time">
<span>12</span>
</div>
<div class="label">
<span>jours</span>
</div>
</div>
<div class="timer">
<div class="time">
<span>17</span>
</div>
<div class="label">
<span>heures</span>
</div>
</div>
<div class="timer">
<div class="time">
<span>48</span>
</div>
<div class="label">
<span>minutes</span>
</div>
</div>
<div class="timer">
<div class="time">
<span>05</span>
</div>
<div class="label">
<span>secondes</span>
</div>
</div>
This could be a way. Split your shadow boxes from your timers, so you can use z-index
to put them behind the timers.
.timer-container {
font-size: 0;
position: relative;
}
.timer-container .timer {
font-size: 16px;
width: 110px;
height: 170px;
display: inline-block;
background-color: #ffffff;
color: red;
margin: 0 5px;
}
.timer-container .time {
height: 120px;
font: 4em serif;
border-bottom: 1px solid #bdd9f6;
padding: 15px 0 0;
}
.timer-container .label {
height: 50px;
font: 1.125em serif;
text-transform: uppercase;
}
.timer-shadow {
position: absolute;
left: 0;
top: 0;
z-index:-1;
}
.timer-shadow span {
margin: 0 5px;
display: inline-block;
-webkit-box-shadow: 0 26px 57px 0 rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 26px 57px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 26px 57px 0 rgba(0, 0, 0, 0.2);
width: 110px;
height: 170px;
}
<div class="timer-container">
<div class="timer" style="z-index:4;">
<div class="time">
<span>12</span>
</div>
<div class="label" style="z-index:3;">
<span>jours</span>
</div>
</div>
<div class="timer" style="z-index:2;">
<div class="time">
<span>17</span>
</div>
<div class="label">
<span>heures</span>
</div>
</div>
<div class="timer" style="z-index:1;">
<div class="time">
<span>48</span>
</div>
<div class="label">
<span>minutes</span>
</div>
</div>
<div class="timer">
<div class="time">
<span>05</span>
</div>
<div class="label">
<span>secondes</span>
</div>
</div>
<div class="timer-shadow">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With