Creating a CSS3 box-shadow on all sides but one

user_29297 0
Viewed 105801

I've got a tabbed navigation bar where I'd like the open tab to have a shadow to set it apart from the other tabs. I'd also like the whole tab section to have a single shadow (see bottom horizontal line) going up, shading the bottom of all tabs except for the open one.

I'm going to use CSS3's box-shadow property to do it, but I can't figure out a way to shade only the parts I want.

Normally I'd cover up the bottom shadow of the open tab with the content area (higher z-index), but in this case the content area itself has a shadow so that would just wind up covering the tab.

Tab layout

     _______    _______    _______
    |       |  |       |  |       |
____|_______|__|       |__|_______|______

Shadow line.

Shadow would go up from the horizontal lines, and outward of the vertical lines.

                _______
               |       |
_______________|       |_________________

Here is a live example:

Any help out there, geniuses?

shadow css html
10 Answers

You can use multiple CSS shadows without any other divs to get desired effect, with the caveat of of no shadows around the corners.

div.shadow {
    -webkit-box-shadow: 0 -3px 3px -3px black, 3px 0px 3px -3px black, -3px 0px 3px -3px black;
    -moz-box-shadow:    0 -3px 3px -3px black, 3px 0px 3px -3px black, -3px 0px 3px -3px black;
    box-shadow:         0 -3px 3px -3px black, 3px 0px 3px -3px black, -3px 0px 3px -3px black;
    height: 25px
}
 <div style="height: 25px"><div class="shadow">tab</div></div>

Overall though its very unintrusive.

user_1899760

I did a sort of hack, not perfect, but it looks okay:

<ul class="tabs">
<li class="tab active"> Tab 1 </li>
<li class="tab"> Tab 2 </li>
<li class="tab"> Tab 3 </li>
</ul>

<div class="tab-content">Content of tab goes here</div>

SCSS

 .tabs { list-style-type: none; display:flex;align-items: flex-end;
  .tab {
    margin: 0;
    padding: 4px 12px;
    border: 1px solid $vivosBorderGrey2;
    background-color:$vivosBorderGrey2;
    color: $vivosWhite;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    border-bottom: 0;
    margin-right: 2px;
    font-size: 14px;
    outline: none;
    cursor: pointer;
    transition: 0.2s;
    &.active {
      padding-bottom: 10px;
      background-color: #ffffff;
      border-color: #eee;
      color: $vivosMedGrey;
      border-bottom-color: transparent;
      box-shadow: 0px -3px 8px -3px rgba(0, 0, 0, 0.1);
    }
    &:hover {padding-bottom: 10px;
    }
   } 

.tabContent {
  border: 1px solid #eee;
  padding:10px;
  margin-top: -1px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
user_21622980 
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
user_118852510
Related