sourcetip

요소의 한쪽에만 드롭 섀도우를 만드는 방법은?

fileupload 2023. 10. 15. 17:34
반응형

요소의 한쪽에만 드롭 섀도우를 만드는 방법은?

그림자를 바닥에만 떨어뜨릴 수 있는 방법이 방법이 있습니까?저는 두 개의 이미지가 나란히 있는 메뉴가 있습니다.오른쪽 그림자는 오른쪽 이미지와 겹치기 때문에 원하지 않습니다.저는 이미지를 사용하는 것을 좋아하지 않는데, 아래쪽으로만 아래로 떨어뜨릴 수 있는 방법이 있을까요?

box-shadow-bottom: 10px #FFF;아니면 비슷한 건가요?

-moz-box-shadow: 0px 3px 3px #000;
-webkit-box-shadow: 0px 3px 3px #000;
box-shadow-bottom: 5px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000');

업데이트 4

업데이트 3과 동일하지만 현대적인 CSS(= fewer 규칙)로 유사 요소에 대한 특별한 위치 지정이 필요하지 않습니다.

#box {
    background-color: #3D6AA2;
    width: 160px;
    height: 90px;
    position: absolute;
    top: calc(10% - 10px);
    left: calc(50% - 80px);
}

.box-shadow:after {
    content:"";
    position:absolute;
    width:100%;
    bottom:1px;
    z-index:-1;
    transform:scale(.9);
    box-shadow: 0px 0px 8px 2px #000000;
}
<div id="box" class="box-shadow"></div>

업데이트 3

이전의 모든 답변들은 이 효과를 만들기 위해 추가 마크업을 사용해 왔습니다. 이 효과는 꼭 필요한 것은 아닙니다.이것이 훨씬 더 깨끗한 해결책이라고 생각합니다.그림자의 정확한 위치와 그림자의 정확한 강도/투명도를 얻기 위해 값을 가지고 노는 것이 유일한 방법입니다.다음은 의사 요소를 사용한 새로운 바이올린입니다.

http://jsfiddle.net/UnsungHero97/ARRRZ/2/

HTML

<div id="box" class="box-shadow"></div>

CSS

#box {
    background-color: #3D6AA2;
    width: 160px;
    height: 90px;
    margin-top: -45px;
    margin-left: -80px;
    position: absolute;
    top: 50%;
    left: 50%;
}

.box-shadow:after {
    content: "";
    width: 150px;
    height: 1px;
    margin-top: 88px;
    margin-left: -75px;
    display: block;
    position: absolute;
    left: 50%;
    z-index: -1;
    -webkit-box-shadow: 0px 0px 8px 2px #000000;
       -moz-box-shadow: 0px 0px 8px 2px #000000;
            box-shadow: 0px 0px 8px 2px #000000;
}

업데이트 2

다른 사람들이 방금 지적한 것처럼 상자 그림자 CSS에 대한 추가 매개 변수만 있으면 이 작업을 수행할 수 있습니다.데모는 다음과 같습니다.

http://jsfiddle.net/K88H9/821/

CSS

-webkit-box-shadow: 0 4px 4px -2px #000000;
   -moz-box-shadow: 0 4px 4px -2px #000000;
        box-shadow: 0 4px 4px -2px #000000;

이것이 더 나은 해결책이 될 것입니다.추가되는 추가 파라미터는 다음과 같이 설명됩니다.

네 번째 길이는 퍼짐 거리입니다.양의 값을 사용하면 그림자 모양이 지정된 반경만큼 모든 방향으로 확장됩니다.음의 값을 가지면 그림자 모양이 축소됩니다.

갱신하다

jsFiddle: http://jsfiddle.net/K88H9/4/ 에서 데모를 확인하십시오.

제가 한 일은 당신이 그림자를 가지기를 원하는 실제 요소 뒤에 숨을 '그림자 요소'를 만드는 것이었습니다.저는 "그림자 요소"의 너비를 실제 요소보다 정확히 2배 적게 지정한 그림자의 폭으로 만든 다음 적절히 정렬했습니다.

HTML

<div id="wrapper">
    <div id="element"></div>
    <div id="shadow"></div>
</div>

CSS

#wrapper {
    width: 84px;
    position: relative;
}
#element {
    background-color: #3D668F;
    height: 54px;
    width: 100%;
    position: relative;
    z-index: 10;
}
#shadow {
    background-color: #3D668F;
    height: 8px;
    width: 80px;
    margin-left: -40px;
    position: absolute;
    bottom: 0px;
    left: 50%;
    z-index: 5;
    -webkit-box-shadow: 0px 2px 4px #000000;
       -moz-box-shadow: 0px 2px 4px #000000;
            box-shadow: 0px 2px 4px #000000;
}

원답

예, 제공한 것과 동일한 구문으로 이 작업을 수행할 수 있습니다.첫 번째 값은 수평 위치를 제어하고 두 번째 값은 수직 위치를 제어합니다. 첫 설정합니다.0px그리고 두번째는 다음과 같습니다.

-webkit-box-shadow: 0px 5px #000000;
   -moz-box-shadow: 0px 5px #000000;
        box-shadow: 0px 5px #000000;

상자 그림자에 대한 자세한 내용은 다음을 참조하십시오.

스프레드(spread) 파라미터를 사용하여 그림자를 더 작게 만듭니다.

.shadow {
  -webkit-box-shadow: 0 6px 4px -4px black;
  -moz-box-shadow: 0 6px 4px -4px black;
  box-shadow: 0 6px 4px -4px black;
}
<div class="shadow">Some content</div>

라이브 데모: http://dabblet.com/gist/a8f8ba527f5cff607327

측면에 그림자가 보이지 않으려면 확산 반경(4번째 파라미터)의 (절대값)이 블러 반경(3번째 파라미터)과 동일해야 합니다.

배경에 고정된 색상이 있는 경우 배경의 색상과 블러 = 0인 두 개의 마스킹 그림자로 측면 shadow 효과를 숨길 수 있습니다.

box-shadow: 
    -6px 0 white,         /*Left masking shadow*/
    6px 0 white,          /*Right masking shadow*/
    0 7px 4px -3px black; /*The real (slim) shadow*/

검은색 그림자는 맨 마지막에 있어야 하며, 모서리를 넘어 확대되는 것을 방지하기 위해 음의 퍼짐(-3px)이 있어야 합니다.

여기서 만지작거리다(마스크 그림자의 색상을 변경하여 실제로 작동하는 방식을 확인합니다.

div{
    width: 100px;
    height: 100px;
    border: 1px solid pink;
    box-shadow: -6px 0 white, 6px 0 white, 0 7px 5px -2px black;
}
<div></div>

enter image description here

도 할 수 .clip-path표시할 모서리를 제외한 모든 오버플로 모서리를 잘라냅니다.

.shadow {
  box-shadow: 0 4px 4px black;
  clip-path: polygon(0 0, 100% 0, 100% 200%, 0 200%);
}

클립 경로(MDN) 참조.의 주장은.polygon는 상단 왼쪽 점, 상단 오른쪽 점, 하단 오른쪽 점 및 하단 왼쪽 점입니다.하단 모서리를 다음으로 설정합니다.200% ( 큰 이든)100% 오버플로를 아래쪽 가장자리로만 제한합니다.

예:

example of boxes with top right bottom and left box-shadow isolated with clip-path

.shadow {
  box-shadow: 0 0 8px 5px rgba(200, 0, 0, 0.5);
}
.shadow-top {
  clip-path: polygon(0% -20%, 100% -20%, 100% 100%, 0% 100%);
}
.shadow-right {
  clip-path: polygon(0% 0%, 120% 0%, 120% 100%, 0% 100%);
}
.shadow-bottom {
  clip-path: polygon(0% 0%, 100% 0%, 100% 120%, 0% 120%);
}
.shadow-left {
  clip-path: polygon(-20% 0%, 100% 0%, 100% 100%, -20% 100%);
}

.shadow-bottom-right {
  clip-path: polygon(0% 0%, 120% 0%, 120% 120%, 0% 120%);
}

/* layout for example */
.box {
  display: inline-block;
  vertical-align: top;
  background: #338484;
  color: #fff;
  width: 4em;
  height: 2em;
  margin: 1em;
  padding: 1em;
}
<div class="box">none</div>
<div class="box shadow shadow-all">all</div>
<div class="box shadow shadow-top">top</div>
<div class="box shadow shadow-right">right</div>
<div class="box shadow shadow-bottom">bottom</div>
<div class="box shadow shadow-left">left</div>
<div class="box shadow shadow-bottom-right">bottom right</div>

내 생각엔 이게 당신이 원하는 것 같은데요?

.shadow {
  -webkit-box-shadow: 0 0 0 4px white, 0 6px 4px black;
  -moz-box-shadow: 0 0 0 4px white, 0 6px 4px black;
  box-shadow: 0 0 0 4px white, 0 6px 4px black;
}
<div class="shadow">wefwefwef</div>

제가 사용할 @engineear의 답변을 바탕으로 한 또 다른 아이디어insetpolygon더 마진이나 패딩과 같은 방식으로 작동하기 때문에 더 쉽습니다.또한 CSS 변수에 의존하여 모든 다양한 경우를 쉽게 정의할 것입니다.

.shadow {
  box-shadow: 0 0 8px 5px rgba(200, 0, 0, 0.5);
  clip-path:inset(var(--t,0) var(--r,0) var(--b,0) var(--l,0))
}

.top { --t:-100%; }
.right { --r:-100%;}
.bottom { --b:-100%; }
.left { --l:-100%;}


/* layout for example */

.box {
  display: inline-block;
  vertical-align: top;
  background: #338484;
  color: #fff;
  width: 4em;
  height: 2em;
  margin: 1em;
  padding: 1em;
}
<div class="box">none</div>
<div class="box shadow top right left bottom">all</div>
<div class="box shadow top">top</div>
<div class="box shadow right">right</div>
<div class="box shadow bottom">bottom</div>
<div class="box shadow left">left</div>
<div class="box shadow bottom right">bottom right</div>
<div class="box shadow bottom top">top bottom</div>
<div class="box shadow left top right">top left right</div>
<div class="box shadow left right"> left right</div>

항상 스펙을 읽는 것이 좋습니다.거기에는 없다box-shadow-bottom그리고 Lea가 지적한 것처럼 접두사를 붙이지 않은 속성은 항상 접두사를 붙이지 않은 속성 다음에 아래에 놓아야 합니다.

그래서 말입니다.

.shadow {
  -webkit-box-shadow: 0px 2px 4px #000000;
  -moz-box-shadow: 0px 2px 4px #000000;
  box-shadow: 0px 2px 4px #000000;
}
<div class="shadow">Some content</div>

오버플로우가 히든으로 설정되어 있고 하단에 패딩이 있는 디브를 사용하는 것은 어떨까요?이것이 가장 간단한 해결책인 것 같습니다.

제가 직접 생각한 게 아니라 다른 곳에서 본 거라 죄송합니다.

요소를 사용하여 상자 그림자와 오버플로를 얻는 요소를 감싸면 추가 상자 그림자가 사라지고 사용 가능한 테두리를 가질 수 있습니다.이를 통해 확산으로 인해 원소가 보이는 것처럼 작아지는 문제도 해결할 수 있습니다.

다음과 같은 경우:

#wrapper { padding-bottom: 10px; overflow: hidden; }
#elem { box-shadow: 0 0 10px black; }

컨텐츠가 여기에 표시됩니다.

순수 CSS로 해야 할 때 여전히 똑똑한 해결책!

요르겐 이븐스 말대로.

저도 그림자가 필요했는데 이미지 밑에만 있고 좌우로 살짝 세팅이 되어 있었어요.효과가 있었습니다.

.box-shadow {
   -webkit-box-shadow: 5px 35px 30px -25px #888888;
      -moz-box-shadow: 5px 35px 30px -25px #888888;
           box-shadow: 5px 35px 30px -25px #888888;
}

여기에 적용되는 요소는 페이지 전체 이미지(980px x 300px)입니다.

설정을 조작할 때 도움이 되는 경우 다음과 같이 실행됩니다.

가로 그림자, 세로 그림자, 블러 거리, 퍼짐(즉, 그림자 크기) 및 색상.

그림자를 찾아보는 것이 좋습니다.

.header{
    -webkit-box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
    -moz-box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
    box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
}

이 코드는 현재 스택 오버플로 웹에서 사용되고 있습니다.

각 값이 무엇을 위한 것인지 알기 위해서는 주먹이 필요합니다.

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

요소의 한쪽에만 그림자 효과를 적용하려면 블러 값을 양수로 설정하고 퍼짐 값을 크기는 같으나 부호는 음수로 설정합니다.그림자를 원하는 쪽에 따라 다음과 같이 오프셋 값을 설정합니다.

  • 위쪽 그림자:offset-x:0 and offset-y: -5px
  • 오른쪽 그림자:offset-x:5px and offset-y: 0
  • 아래쪽 그림자:offset-x:0 and offset-y: 5px
  • 왼쪽 그림자:offset-x:-5px and offset-y: 0

.box{
    margin: 2rem;
    padding: 1rem;
}

.shadow-all{
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}
.shadow-top {
    box-shadow: 0 -5px 3px -3px #00000030;
}
  
.shadow-right {
    box-shadow: 5px 0 3px -3px #00000030;
}
  
.shadow-bottom {
    box-shadow: 0 5px 3px -3px #00000030;
}
  
.shadow-left {
    box-shadow: -5px 0 3px -3px #00000030;
}   
        
    <div class="box shadow-all">
        Shadow All 
    </div>
    <div class ="box shadow-top">
        Shadow Top
    </div>
    <div class ="box shadow-right">
        Shadow Right
    </div>
    <div class ="box shadow-bottom">
        Shadow Bottom
    </div>
      
    <div class ="box shadow-left">
        Shadow left
    </div>

여기서 더 자세히 보기

배경이 견고한 경우(또는 CSS를 사용하여 재생할 수 있는 경우) 선형 그라디언트를 다음과 같이 사용할 수 있습니다.

div {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 5px, #fff 5px, #fff 100%)
}
<div>
<p>Foobar</p>
<p>test</p>
</div>

이렇게 하면 30% 불투명도에서 완전 투명도에 이르는 요소 하단에 5px 기울기가 발생합니다.나머지 원소는 흰색 바탕을 가지고 있습니다.물론, 직선 구배의 마지막 2가지 색상 정지를 변경하면 배경을 완전히 투명하게 만들 수 있습니다.

이 코드 펜(제가 만든 것이 아닙니다)은 이 작업을 수행하는 매우 간단한 방법과 그 반대 측면을 아주 멋지게 보여줍니다.

box-shadow: 0 5px 5px -5px #333;

https://codepen.io/zeckdude/pen/oxywmm

바닥에 그라데이션을 적용할 수도 있습니다. 원하는 그림자가 이미 반투명한 요소에 있기 때문에 클리핑에 대해 걱정할 필요가 없었기 때문에 도움이 되었습니다.

&:after {
      content:"";
      width:100%;
      height: 8px;
      position: absolute;
      bottom: -8px;
      left: 0;
      background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
    }

"아래"와 "높이" 속성을 일치시키고 그림자의 맨 위/아래에 원하는 대로 rgba 값을 설정하면 됩니다.

이렇게 할 수 있습니다.

일반 구문:

selector {
   box-shadow: topBoxShadow, bottomBoxShadow, rightBoxShadow, leftBoxShadow
}

예를 들어, 우리는 빨간색으로 아래 박스 그림자만 만들고자 합니다.

이를 위해서는 아래쪽 상자 섀도 옵션을 설정해야 하는 모든 사이드 옵션을 설정하고 다음과 같이 다른 모든 사이드 옵션을 빈 상태로 설정해야 합니다.

.box {
     -moz-box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
     -o-box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
     -webkit-box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
     box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
}

상·하의 박스안에-

   
 .cont{
        position: relative;
        border: 1px solid black;
        margin: 0 auto;
        width: 200px;
        height: 200px;
        overflow: hidden;
    }
    .shadow {
        position: absolute;
        width: 100%;
            height:100%;
        box-shadow: inset gray 0px 50px 15px 0px,inset gray 0px -50px 15px 0px;
        padding-right: 30px;
        margin-left: -15px;
    }

    
<div class=cont>
    <div class=shadow></div>
        
</div>

다른 사람에게 업데이트하여 흰색 대신 투명한 면에 대답하여 다른 색 배경에서도 작동합니다.

body {
  background: url(http://s1.picswalls.com/wallpapers/2016/03/29/beautiful-nature-backgrounds_042320876_304.jpg)
}

div {
  background: url(https://www.w3schools.com/w3css/img_avatar3.png) center center;
  background-size: contain;
  width: 100px;
  height: 100px;
  margin: 50px;
  border: 5px solid white;
  box-shadow: 0px 0 rgba(0, 0, 0, 0), 0px 0 rgba(0, 0, 0, 0), 0 7px 7px -5px black;
}
<div>
</div>

안쪽의 그림자

 .shadow {
   -webkit-box-shadow: inset 0 0 9px #000;
   -moz-box-shadow: inset 0 0 9px #000;
   box-shadow: inset 0 0 9px #000;
 }
<div class="shadow">wefwefwef</div>

언급URL : https://stackoverflow.com/questions/5460129/how-to-create-a-drop-shadow-only-on-one-side-of-an-element

반응형

'sourcetip' 카테고리의 다른 글

mysql 데이터베이스에 배열 저장  (0) 2023.10.15
jQuery의 요소 또는 클래스 LIKE 선택기?  (0) 2023.10.15
두 개의 사용자 지정 게시물 유형 동일한 범주  (0) 2023.10.15
부분 문자열 색인 가져오기  (0) 2023.10.15
스파크 상태의 데이터 프레임 열 업데이트  (0) 2023.10.15

'sourcetip'의 다른글

  • 현재글요소의 한쪽에만 드롭 섀도우를 만드는 방법은?

관련글

댓글

티스토리툴바