한 쪽을 제외한 모든 면에 CSS3 상자 그림자 만들기
https://stackoverflow.com/questions/1429605
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
열린 탭에 그림자를 주어 다른 탭과 구분할 수 있는 탭 탐색 모음이 있습니다.또한 전체 탭 섹션에 단일 그림자(하단 수평선 참조)가 올라가서 열려 있는 탭을 제외한 모든 탭의 하단을 음영 처리하고 싶습니다.
나는 CSS3를 사용할 것이다. box-shadow 할 수 있는 속성이 있는데 원하는 부분만 음영 처리할 수 있는 방법이 없네요.
일반적으로 열린 탭의 아래쪽 그림자를 콘텐츠 영역(더 높은 위치)으로 가립니다. z-index), 하지만 이 경우 콘텐츠 영역 자체에 그림자가 있어서 탭을 덮게 됩니다.
탭 레이아웃
_______ _______ _______
| | | | | |
____|_______|__| |__|_______|______
섀도우 라인.
그림자는 수평선에서 올라가고 수직선 바깥쪽으로 올라갑니다.
_______
| |
_______________| |_________________
여기 실제 예는 다음과 같습니다.
도움이 되셨나요, 천재 여러분?
해결책
샘플 에서이 스타일로 #Content 내부의 div를 만듭니다.
#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>
다른 DIV없이 여러 CSS 그림자를 사용하여 원하는 효과를 얻을 수 있습니다.
-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에 양의 상대를 갖는 대신 아래 #content div보다 높은 z-index (그림자가있는 z-index보다 낮은 z-index보다 낮은 z-index가있는 aactive 클래스에 넣습니다. 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 */
이 문제를 해결하는 한 가지, 오히려 창의적이고,이 문제를 해결하는 방법은 다음과 같은 것입니다. 제 경우에는 다음과 같습니다.
#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 개의 그림자를 사용할 수도 있습니다 - 왼쪽으로 1px, 오른쪽으로 1px 1px, 1px 위로 1px 또는 두껍게 원하는 그림을 사용할 수도 있습니다.
실험적인 기술을 사용하려는 경우 부분적인 지원, 당신은 clip-path 재산.
그러면 원하는 효과가 나타납니다.상단, 왼쪽 및 오른쪽에 상자 그림자가 있고 하단 가장자리가 깔끔하게 잘립니다.
귀하의 경우에는 클립 경로를 사용합니다:삽입(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);
}
