Создание CSS3 box-shadow со всех сторон, кроме одного

Question

У меня есть панель навигации с вкладками, на которой я бы хотел, чтобы на открытой вкладке была тень, чтобы отделить ее от других вкладок. Мне также хотелось бы, чтобы во всей секции вкладок поднималась одна тень (см. Нижнюю горизонтальную линию), затеняя нижнюю часть всех вкладок, кроме открытой.

Я собираюсь использовать свойство CSS3 box-shadow, но не могу найти способ закрасить только те части, которые мне нужны.

Обычно я бы покрывал нижнюю тень открытой вкладки областью содержимого (выше z-index), но в этом случае сама область содержимого имеет тень, так что она просто закрывала бы вкладку. *

Расположение вкладок

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

Теневая линия.

Тень будет подниматься от горизонтальных линий и наружу от вертикальных линий.

                _______
               |       |
_______________|       |_________________

Здесь является живым примером:

Любая помощь, гении?

Answer 1

В вашем примере создайте div внутри #content с этим стилем

#content_over_shadow {
    padding: 1em;
    position: relative; /* look at this */
    background:#fff;    /* a solid background (non transparent) */
}

и измените стиль #content (удалите отступы) и добавьте тень

#content {
    font-size: 1.8em;
    box-shadow: 0 0 8px 2px #888; /* line shadow */
}

добавить тени на вкладки:

#nav li a {
    margin-left: 20px;
    padding: .7em .5em .5em .5em;
    font-size: 1.3em;
    color: #FFF;
    display: inline-block;
    text-transform: uppercase;
    position: relative;
    box-shadow: 0 0 8px 2px #888; /* the shadow */
}

Answer 2

Отрежьте его переполнением.

<style type="text/css">
    div div {box-shadow:0 0 5px #000; height:20px}
    div {overflow:hidden;height:25px; padding:5px 5px 0 5px}

</style>
<div><div>tab</div></div>

Answer 3

Вы можете использовать несколько теней CSS без каких-либо других элементов div, чтобы получить желаемый эффект, с предупреждением об отсутствии теней по углам.

-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;

В целом, хотя это очень ненавязчиво.

Answer 4

Еще один, довольно креативный способ решения этой проблемы - добавление псевдоэлемента: after или: before к одному из элементов. В моем случае это выглядит так:

#magik_megamenu>li:hover>a:after {
    height: 5px;
    width: 100%;
    background: white;
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
}

Смотрите на скриншот, псевдоэлемент сделан красным, чтобы сделать его более заметным.

Answer 5

Лично мне больше всего нравится решение, найденное здесь: http://css3pie.com/demos/tabs/

Это позволяет вам иметь нулевое состояние или состояние наведения с цветом фона, который по-прежнему имеет тень от содержимого, наложенного на него. Не уверен, что это возможно с помощью метода выше:

UPDATE:

На самом деле я был не прав. Вы можете заставить принятое решение поддерживать состояние наведения, показанное выше. Сделайте это:

Вместо положительного родственника на a, поместите его в класс a.active с z-индексом, который выше, чем ваш #content div ниже (с тенью на нем), но ниже, чем z- индекс вашего content_wrapper.

Например:

<nav class="ppMod_Header clearfix">
    <h1 class="ppMod_PrimaryNavigation-Logo"><a class="ppStyle_Image_Logo" href="/">My company name</a></h1>
    <ul class="ppList_PrimaryNavigation ppStyle_NoListStyle clearfix">
        <li><a href="/benefits">Benefits</a></li>
        <li><a class="ppStyle_Active" href="/features">Features</a></li>
        <li><a href="/contact">Contact</a></li>
        <li><a href="/company">Company</a></li>
    </ul>
</nav>
<div id="ppPage-Body">
    <div id="ppPage-BodyWrap">
        content goes here
    </div>
</div>

затем с вашим css:

#ppPage-Body
    box-shadow: 0 0 12px rgba(0,0,0,.75)
    position: relative /* IMPORTANT PART */

#ppPage-BodyWrap
    background: #F4F4F4
    position: relative /* IMPORTANT PART */
    z-index: 4 /* IMPORTANT PART */


.ppList_PrimaryNavigation li a:hover
    background: #656565
    -webkit-border-radius: 6px 6px 0 0
    -moz-border-radius: 6px 6px 0 0
    border-radius: 6px 6px 0 0

.ppList_PrimaryNavigation li a.ppStyle_Active
    background: #f4f4f4
    color: #222
    -webkit-border-radius: 6px 6px 0 0
    -moz-border-radius: 6px 6px 0 0
    border-radius: 6px 6px 0 0
    -webkit-box-shadow: 0 0 12px rgba(0,0,0,0.75)
    -moz-box-shadow: 0 0 12px rgba(0,0,0,0.75)
    box-shadow: 0 0 12px rgba(0,0,0,0.75)
    position: relative /* IMPORTANT PART */
    z-index: 3 /* IMPORTANT PART */

Answer 6

Вы также можете скрыть тень, используя несколько теней.

box-shadow: 0 10px 0 #fff, 0 0 10px #ccc;

Answer 7

Если вы добавили два пролета для подключения, вы можете использовать два, например:

box-shadow: -1px -1px 1px #000;

на одном пролете и

box-shadow: 1px -1px 1px #000;

по другому. Может работать!

Если тени перекрываются, вы могли бы даже использовать 3 тени - одну на 1 пиксель влево, одну на 1 пиксель вправо и одну на 1 пиксель вверх или любую толщину, какую хотите.

Answer 8

Я сделал что-то вроде взлома, не идеально, но выглядит нормально:

<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);
}

Answer 9

Если вы хотите использовать экспериментальную технологию только с частичной поддержкой , вы можете использовать свойство clip-path .

Это даст желаемый эффект: тень от ящика сверху, слева и справа с чистым срезом по нижнему краю.

В вашем случае вы бы использовали clip-path: inset (px px px px); где значения пикселей рассчитываются по соответствующему ребру (см. ниже).

#container {
    box-shadow: 0 0 8px 2px #888;
    clip-path: inset(-8px -8px 0px -8px);
}

Это обрезает div в вопросе:

• 8 пикселей над верхом (включая тень)
• 8 пикселей за пределами правого края (включая тень)
• 0 пикселей снизу (чтобы скрыть тень)
• 8 пикселей за пределами левого края (включая тень)

Обратите внимание, что запятые между значениями пикселей не требуются.

Размер div может быть гибким.