Создание тени с CSS3 со всех сторон, но одно

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

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

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

Макет вкладки

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

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

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

                _______
               |       |
_______________|       |_________________

Здесь - живой пример:

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

ОТВЕТЫ

Ответ 1

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

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

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

#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 */
}

Ответ 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>

Ответ 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;

В целом, хотя он очень неинтрузивный.

Ответ 4

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

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

shadowed tab with hover state

UPDATE:

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

Вместо того, чтобы иметь положительный родственник на a, поместите его в класс a.active с индексом z, который выше вашего #content div ниже (который имеет тень на нем), но ниже, чем z- index на вашем 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 */

Ответ 5

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

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

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

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

Ответ 6

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

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

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

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

на другой. Могу работать!

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

Ответ 7

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

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

Ответ 8

Если вы хотите использовать экспериментальную технологию только с частичной поддержкой, вы можете использовать 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 может быть гибким.