How to create a complex shadow in CSS? [closed] - html

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I'm currently redesigning a poorly written website to remove images and convert them to CSS as much as possible, among other tasks. I have come up on one particularly difficult graphic (there are 3 of these, one for each tab that is active):
Note how the shadow goes around the edges of the tab handle and stays above the other two tab handles. I've tried everything I could think of to get this shadow right with CSS, but I don't seem to be getting anywhere. Any ideas?

Answer 1

Well, the real problem isn't only the active tab overlaping the others with shadows, what could be easily achived with simple z-index and box-shadow tricks.
The desired rounded out effect needs more advanced tricks, not being possible directly with border-radius. The trick I prefer uses gradients, based on Lea Verou's negative border radius with gradients, since it can be used along with shadows almost perfectly.
$(function() {
$('.nav a').click(function(e) {
e.preventDefault()
$('.nav li').removeClass('active')
var h = $(this).attr('href')
$(this).parent().addClass('active')
$('.tab-pane').removeClass('active')
$(h).addClass('active')
})
})
html {
background: #ddd;
margin: 20px 10px auto;
font-family: Sans-serif;
}
.nav {
/* Using flex to easyly adjust to any number of tabs */
display: flex;
padding: 0;
margin: 0 0 -10px;
}
.nav li {
flex: 1 0 auto;
list-style: none outside none;
position: relative;
border-radius: 10px 10px 0 0;
}
.nav .active {
z-index: 2;
background: #fff;
}
.nav a {
display: block;
padding: 10px 40px 20px;
text-decoration: none;
text-align: center;
color: #777;
background: #f5f5f5;
border: 1px solid #aaa;
border-radius: 10px 10px 0 0;
}
.nav .active a {
background: #fff;
border-bottom: 0;
color: #111;
padding: 10px 40px 11px;
box-shadow: -3px -1px 2px rgba(0, 0, 0, .05), 3px -1px 2px rgba(0, 0, 0, .05);
}
.nav .active:first-child {
border-left: 1px solid #aaa;
}
.nav .active:first-child a {
border-left: 0;
}
.nav .active:last-child {
border-right: 1px solid #aaa;
}
.nav .active:last-child a {
border-right: 0;
}
.nav .active:not(:first-child) a:before,
.nav .active:not(:last-child) a:after {
/* Rounded out corners are just generated elements */
content: '';
position: absolute;
width: 10px;
height: 10px;
bottom: 9px;
}
.nav .active:not(:first-child) a:before {
/* The left rounded out tab are achived here. */
background: radial-gradient(circle at 0 0, transparent 8px, #aaa 9px, #fff 10px);
left: -9px;
}
.nav .active:not(:last-child) a:after {
/* The right rounded out tab are achived here. */
background: radial-gradient(circle at 100% 0, transparent 8px, #aaa 9px, #fff 10px);
right: -9px;
}
.tab-content {
border: 1px solid #aaa;
border-radius: 10px;
box-shadow: 2px 1px 10px rgba(0, 0, 0, .2), 0 6px 30px rgba(0, 0, 0, .08);
background: #fff;
color: #111;
padding: 20px;
position: relative;
z-index: 1;
}
.tab-pane {
display: none;
}
.tab-pane.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
<li class="active">Home</li>
<li>Profile</li>
<li>Settings</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">1</div>
<div class="tab-pane" id="profile">2</div>
<div class="tab-pane" id="settings">3</div>
</div>
Of course, JavaScript was used only to handle the tab change, to better show the differences on each tab position styling.