열려있는 탭에 다른 탭과 구분할 수있는 그림자가있는 탭 탐색 모음이 있습니다. 또한 전체 탭 섹션에 단일 그림자 (하단 수평선 참조)가 올라가고 열려있는 탭을 제외한 모든 탭의 하단이 음영 처리되기를 바랍니다.
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 */
}
답변
오버플로로 잘라냅니다.
div div {box-shadow:0 0 5px #000; height:20px}
div {overflow:hidden;height:25px; padding:5px 5px 0 5px}<div><div>tab</div></div>답변
모서리 주위에 그림자가 없다는 경고와 함께 원하는 효과를 얻기 위해 다른 div없이 여러 CSS 그림자를 사용할 수 있습니다.
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>전반적으로 매우 방해가되지 않습니다.
답변
이 문제를 해결하는 다소 창의적인 또 다른 방법은 요소 중 하나에 : after 또는 : before 의사 요소를 추가하는 것입니다. 제 경우에는 다음과 같습니다.
#magik_megamenu>li:hover>a:after {
height: 5px;
width: 100%;
background: white;
content: '';
position: absolute;
bottom: -3px;
left: 0;
}더 잘 보이게하기 위해 유사 요소를 빨간색으로 만든 스크린 샷을 참조하십시오.
답변
개인적으로 나는 여기에서 찾은 솔루션이 가장 마음에 듭니다 . http://css3pie.com/demos/tabs/
그것은 당신이 그것을 오버레이하는 아래 콘텐츠의 그림자가 여전히 남아있는 배경색으로 0 상태 또는 호버 상태를 가질 수 있습니다. 위의 방법으로 가능한지 확실하지 않습니다.
최신 정보:
사실 나는 틀렸다. 수락 된 솔루션이 위에 표시된 호버 상태를 지원하도록 할 수 있습니다. 이 작업을 수행:
a에 양의 친척을 갖는 대신 아래의 #content div보다 높지만 (그림자가있는) Z- 색인보다 낮은 z- 색인을 사용하여 a.active 클래스에 넣으십시오. 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 */답변
최신 정보:
clip-path 이제 모든 주요 브라우저에서 지원됩니다.
원래 답변 :
부분적 으로 만 지원되는 실험 기술을 사용하려는 경우 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의 크기는 유연 할 수 있습니다.
답변
여러 개의 상자 그림자를 사용하여 그림자를 가릴 수도 있습니다.
상자 그림자 : 0 10px 0 #fff, 0 0 10px #ccc;