Создание окна CSS3-тень со всех сторон, кроме одной
https://stackoverflow.com/questions/1429605
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
У меня есть панель навигации с вкладками, где я бы хотел, чтобы у открытой вкладки была тень, чтобы отличать ее от других вкладок.Я бы также хотел, чтобы во всем разделе вкладок была одна тень (см. Нижнюю горизонтальную линию), идущая вверх, затеняя нижнюю часть всех вкладок, кроме открытой.
Я собираюсь использовать CSS3 box-shadow я могу это сделать, но я не могу придумать способ затенить только те части, которые я хочу.
Обычно я бы закрыл нижнюю тень открытой вкладки областью содержимого (выше z-index), но в этом случае сама область содержимого имеет тень, так что она просто закрывает вкладку.
Расположение вкладок
_______ _______ _______
| | | | | |
____|_______|__| |__|_______|______
Линия тени.
Тень будет уходить вверх от горизонтальных линий и наружу от вертикальных.
_______
| |
_______________| |_________________
Здесь это живой пример:
Кто-нибудь может вам помочь, гении?
Решение
В вашем примере создайте 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 */
}
Другие советы
Отрежь его переполнением.
<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>
Вы можете использовать несколько теней 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;
В целом, хотя это очень ненавязчиво.
Лично мне больше всего нравится решение, найденное здесь: http://css3pie.com/demos/tabs/
Это позволяет вам иметь нулевое состояние или состояние наведения курсора с цветом фона, на который все еще накладывается тень от содержимого ниже.Не уверен, что это возможно с помощью описанного выше метода:
Обновить:
На самом деле я был неправ.Вы можете заставить принятое решение поддерживать состояние наведения, показанное выше.Сделай это:
Вместо того, чтобы иметь положительный относительный параметр в 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 */
Еще один, довольно креативный способ решения этой проблемы - добавление псевдоэлемента: after или: before к одному из элементов. В моем случае это выглядит так:
#magik_megamenu>li:hover>a:after {
height: 5px;
width: 100%;
background: white;
content: '';
position: absolute;
bottom: -3px;
left: 0;
}
Смотрите на скриншот, псевдоэлемент сделан красным, чтобы сделать его более заметным.
вы также можете скрыть тени, используя несколько теней.
box-shadow: 0 10px 0 #fff, 0 0 10px #ccc;
Если вы добавили два пролета для подключения, вы можете использовать два, например:
box-shadow: -1px -1px 1px #000;
на одном пролете и
box-shadow: 1px -1px 1px #000;
по другому. Может работать!
Если тени перекрываются, вы могли бы даже использовать 3 тени - одну на 1 пиксель влево, одну на 1 пиксель вправо и одну на 1 пиксель вверх, или сколь угодно толстую.
Если вы готовы использовать экспериментальную технологию только с частичная поддержка, вы могли бы использовать clip-path собственность.
Это произведет желаемый эффект:прямоугольная тень сверху, слева и справа с четким срезом по нижнему краю.
В вашем случае вы бы использовали clip-path:вставка (px 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 может быть гибким.
Я сделал что-то вроде взлома, не идеального, но выглядит нормально:
<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);
}
