CSS에서 PNG 이미지의 그림자

자유 형식의 사각형이 아닌 PNG 이미지가 있습니다.

이 이미지에 그림자 효과를 적용해야합니다.

표준 접근법 ...

-o-box-shadow:      12px 12px 29px #555;
-icab-box-shadow:   12px 12px 29px #555;
-khtml-box-shadow:  12px 12px 29px #555;
-moz-box-shadow:    12px 12px 29px #555;
-webkit-box-shadow: 12px 12px 29px #555;
box-shadow:         12px 12px 29px #555;

... 정사각형처럼이 이미지의 그림자를 표시합니다. 따라서 이미지에 표시된 객체의 형태를 따르지 않는 이미지와 사각형 그림자가 보입니다.

제대로 할 방법이 있습니까?

파티에 조금 늦었지만 네, 드롭 섀도우 필터 (웹킷의 경우), SVG (Firefox의 경우) 및 IE의 DX 필터의 조합을 사용하여 알파 마스크 된 PNG 주위에 "진정한"동적 그림자를 만들 수 있습니다.

.shadowed {
    -webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
    filter: url(#drop-shadow);
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}

<!-- HTML elements here -->

<svg height="0" xmlns="http://www.w3.org/2000/svg">
    <filter id="drop-shadow">
        <feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
        <feOffset dx="12" dy="12" result="offsetblur"/>
        <feFlood flood-color="rgba(0,0,0,0.5)"/>
        <feComposite in2="offsetblur" operator="in"/>
        <feMerge>
            <feMergeNode/>
            <feMergeNode in="SourceGraphic"/>
        </feMerge>
    </filter>
</svg>

실제 그림자와 상자 그림자의 비교 와 방금 설명한 기술에 대한 기사 .

이게 도움이 되길 바란다!

예, filter: dropShadow(x y blur? spread? color?)CSS 또는 인라인으로를 사용할 수 있습니다.

img {
  width: 150px;
  -webkit-filter: drop-shadow(5px 5px 5px #222);
  filter: drop-shadow(5px 5px 5px #222);
}

<img src="https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png">

<img src="https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png" style="-webkit-filter: drop-shadow(5px 5px 5px #222); filter: drop-shadow(5px 5px 5px #222);">

그림자를 적용하려는 이미지가 100 개 이상인 경우 명령 줄 프로그램 ImageMagick을 사용하는 것이 좋습니다 . 이를 통해 하나의 명령을 입력하여 100 개의 이미지에 모양의 그림자를 적용 할 수 있습니다! 예를 들면 다음과 같습니다.

for i in "*.png"; do convert $i '(' +clone -background black -shadow 80x3+3+3 ')' +swap -background none -layers merge +repage "shadow/$i"; done

위의 (shell) 명령은 현재 디렉토리의 각 .png 파일을 가져 와서 그림자를 적용하고 결과를 shadow / 디렉토리에 저장합니다. 그림자 생성이 마음에 들지 않으면 매개 변수를 많이 조정할 수 있습니다. shadows 에 대한 문서를 살펴 보는 것으로 시작 하십시오. 일반적인 사용법 지침 에는 이미지에 대해 할 수있는 멋진 예제가 많이 있습니다.

그림자의 모양에 대해 미래에 마음이 바뀌면 다른 매개 변수로 새 이미지를 생성하는 명령 하나입니다. :-)

img {
  -webkit-filter: drop-shadow(5px 5px 5px #222222);
  filter: drop-shadow(5px 5px 5px #222222);
}

그것은 나를 위해 잘 작동했습니다. IE에서 한 가지 주목할 점은 세 가지 문자가 작동하지 않는 풀 컬러 (# 222222)가 필요합니다.

Dudley가 그의 답변 에서 언급했듯이 이것은 웹킷 용 드롭 섀도우 CSS 필터, Firefox 용 SVG 및 Internet Explorer 9- 용 DirectX 필터를 통해 가능합니다.

한 단계 더 나아가 SVG를 인라인하여 추가 요청을 제거합니다.

.shadowed {
    -webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
    filter: url("data:image/svg+xml;utf8,<svg height='0' xmlns='http://www.w3.org/2000/svg'><filter id='drop-shadow'><feGaussianBlur in='SourceAlpha' stdDeviation='4'/><feOffset dx='12' dy='12' result='offsetblur'/><feFlood flood-color='rgba(0,0,0,0.5)'/><feComposite in2='offsetblur' operator='in'/><feMerge><feMergeNode/><feMergeNode in='SourceGraphic'/></feMerge></filter></svg>#drop-shadow");
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}

당신의 클래스에 반경이있는 테두리를 추가하십시오. 이미지의 모서리가 둥근 경우에도 기본적으로 그림자가 블록 경계에 적용되기 때문입니다.

border-radius: 4px;

당신의 이미지 코너에 따라 테두리 반경을 변경하십시오. 이 도움을 바랍니다.

이것을 추가하십시오 :

-webkit-filter: drop-shadow(5px 5px 5px #fff);
 filter: drop-shadow(5px 5px 5px #fff); 

예:

<img class="home-tab-item-img" src="img/search.png"> 

.home-tab-item-img{
    -webkit-filter: drop-shadow(5px 5px 5px #fff);
     filter: drop-shadow(5px 5px 5px #fff); 
}

준비된 글로우 호버 애니메이션 코드 스 니펫은 다음과 같습니다.

http://codepen.io/widhi_allan/pen/ltaCq

-webkit-filter: drop-shadow(0px 0px 0px rgba(255,255,255,0.80));

내가 이것을 처음 게시했을 때 가능하지 않았으므로 이것이 해결 방법입니다. 이제 다른 답변을 사용하는 것이 좋습니다.

이미지의 윤곽을 정확하게 얻는 방법은 없지만 중앙의 이미지 뒤에 div를 사용하여 이미지를 가짜로 만들 수 있습니다.

내 트릭이 작동하지 않으면 이미지를 잘라내어 작은 이미지마다 하나씩 처리해야합니다. (이미지가 많을수록 그림자가 더 정확 해집니다) 그러나 대부분의 이미지에는 단 하나의 이미지로 괜찮아 보입니다.

당신이해야 할 일은 img 주위에 랩 div를 두는 것입니다.

<div id="imgWrap">
    <img id="img" scr="imgLocation">
</div>

그런 다음 랩 안에 빈 칸막이를 넣으십시오 (이것은 그림자 역할을합니다)

<div id="imgWrap">
    <div id="shadow"> </div>
    <img id="img" scr="imgLocation">
</div>

CSS로 img 뒤에 그림자를 표시해야합니다.

#img {
    z-index: 1;
}

#shadow {
    z-index: 0; /*make this value negative if doesnt work*/
    box-shadow: 0 -130px 180px 150px rgba(255, 255, 0, 0.6);
    width: 0;
    height: 0;
}

이제 imgWrap을 원래 img 위치로 배치하십시오 ... img의 그림자를 가운데로 맞추기 위해 상자 그림자의 처음 두 값으로 엉망으로 만들 수 있습니다 .... img와 그림자 div를 절대로 배치 할 수 있습니다 img top 및 left 값을 0으로 만들고 shadow div 값을 img 너비와 높이의 절반으로 각각 만듭니다.

이것이 무시 무시하게 보이면 img를 잘라 내고 다시 시도하십시오.

(개요만으로 img 뒤의 그림자를 원하지 않으면 img를 불투명하게 만들고 투명하지 않은 것처럼 행동해야합니다. 어려워지지 않으며 나중에 설명 할 수 있습니다.)

필자의 경우 다른 모양과 투명도의 PNG 이미지로 최신 모바일 브라우저에서 작동해야했습니다. 이미지 복제본을 사용하여 그림자를 만들었습니다. 즉 img, 동일한 이미지의 두 가지 요소 중 하나가 다른 요소 위에 있고 (을 사용하여 position: absolute), 뒤에있는 요소에는 다음 규칙이 적용됩니다.

.image-shadow {
  filter: blur(10px) brightness(-100);
  -webkit-filter: blur(10px) brightness(-100);
  opacity: .5;
}

여기에는 아래쪽 이미지를 어둡게하기위한 밝기 필터와 일반적으로 나타나는 흐림 효과를 드리 우기위한 흐림 필터가 포함됩니다. 그런 다음 부드럽게하기 위해 50 %의 불투명도가 적용됩니다.

이것은 moz및 ms플래그를 사용하여 크로스 브라우저에 적용 할 수 있습니다 .

예 : https://jsfiddle.net/5mLssm7o/

임의로 모양의 그림자에 사용할 수있는 제안 된 기능이 있습니다. Lea Verou의 도움으로 여기에서 볼 수 있습니다.

http://www.netmagazine.com/features/hot-web-standards-css-blending-modes-and-filters-shadow-dom

그러나 브라우저 지원은 최소한입니다.

CSS로는 불가능합니다-이미지는 사각형이므로 그림자는 사각형의 그림자입니다. 가장 쉬운 방법은 Photoshop / Gimp 또는 다른 이미지 편집기를 사용하여 그림자를 코어 드로우처럼 적용하는 것입니다.

"작은"그림자가 필요할 때 자주 사용하는 트릭 (읽기 : 윤곽이 매우 정밀해서는 안 됨)은 이미지 아래에 100 % 검은 색에서 100 %까지 투명하게 방사상으로 채운 DIV를 배치하는 것입니다. DIV의 CSS는 다음과 같습니다.

.shadow320x320{    
        background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.58) 0%, rgba(0,0,0,0.58) 1%, rgba(0,0,0,0) 43%, rgba(0,0,0,0) 100%); /* FF3.6+ */
        background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0.58)), color-stop(1%,rgba(0,0,0,0.58)), color-stop(43%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
        background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.58) 0%,rgba(0,0,0,0.58) 1%,rgba(0,0,0,0) 43%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0.58) 0%,rgba(0,0,0,0.58) 1%,rgba(0,0,0,0) 43%,rgba(0,0,0,0) 100%); /* Opera 12+ */
        background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0.58) 0%,rgba(0,0,0,0.58) 1%,rgba(0,0,0,0) 43%,rgba(0,0,0,0) 100%); /* IE10+ */
        background: radial-gradient(ellipse at center, rgba(0,0,0,0.58) 0%,rgba(0,0,0,0.58) 1%,rgba(0,0,0,0) 43%,rgba(0,0,0,0) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#94000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  }

그러면 320x320 DIV에 검은 색의 희미한 '점'이 만들어집니다. DIV의 높이 또는 너비를 조정하면 해당 타원형이 나타납니다. 병이나 다른 실린더 모양의 그림자 등 그림자를 만드는 것이 좋습니다.

CSS 그라디언트를 만들 수있는 절대적으로 믿을 수 없을만큼 뛰어난 도구가 있습니다.

http://www.colorzilla.com/gradient-editor/

추신 : 당신이 그것을 사용할 때 예의 광고 클릭하십시오. (아니, 나는 그것과 관련이 없습니다. 그러나 예의 클릭은 약간의 습관이되어야합니다. 특히 당신이 자주 사용하는 도구의 경우 ... )

모든 브라우저에서 안정적으로이 작업을 수행 할 수는 없습니다. Microsoft는 더 이상 IE10 +부터 DX 필터를 지원하지 않으므로 여기서 해결 된 솔루션은 없습니다.

https://msdn.microsoft.com/en-us/library/hh801215(v=vs.85).aspx

모든 브라우저에서 안정적으로 작동하는 유일한 속성은입니다 box-shadow. 그러면 요소 (예 : div)에 테두리가 생겨서 사각형 테두리가됩니다.

상자 그림자 : horizontalOffset verticalOffset blurDistance spreadDistance 색상 삽입;

예 :

box-shadow: -2px 6px 12px 6px #CCCED0;

'정사각형'이지만 둥근 모서리가 균일 한 이미지가있는 경우 그림자가와 함께 작동 border-radius하므로 div에서 항상 이미지의 둥근 모서리를 에뮬레이션 할 수 있습니다.

다음에 대한 Microsoft 설명서가 있습니다 box-shadow.

https://msdn.microsoft.com/en-us/library/gg589484(v=vs.85).aspx

아마 당신은 이것을 찾고 있습니다. http://lineandpixel.com/blog/png-shadow

img { png-shadow: 5px 5px 5px #222; }