[css] 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);
}