CSS에서 PNG 이미지의 그림자

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) 및 DX 필터 (IE 용)를 조합하여 알파 마스크 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 에 대한 문서를 살펴 보는 것으로 시작 하십시오. 일반적인 사용법 지침 에는 이미지에 대해 할 수있는 멋진 예제가 많이 있습니다.

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

---

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')";
}

---

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

저에게 큰 효과가있었습니다. ei에서 한 가지주의 할 점은 세 가지 문자가 작동하지 않는 풀 컬러 (# 222222)가 필요하다는 것입니다.

---

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

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));

---

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

There is no way to get the outline of the image exactly but you can fake it with a div behind the image in the center.

If my trick doesn't work then you have to cut up the image and do it for every single of the little images. (the more images the more accurate the shadow will look) but for most images it looks alright with just one img.

what you need to do is to put a wrap div around your img like so

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

then you put an empty divider inside the wrap (this will serve as the shadow)

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

and then you have to make the shadow appear behind the img with CSS:

#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;
}

now position the imgWrap to position the original img... to center the shadow of the img you can mess with the first two values of the box-shadow making them negative.... or you can position the img and the shadow divs absolutely making img top and left values = 0 and the shadow div values = half of img width and height respectively.

If this looks horrid cut your img up and try again.

(If you don't want the shadow behind the img just on the outline then you need to make your img opaque and make it act as if it was transparent which is not that hard and you can comment and I'll explain later)

---

In my case it had to work on modern mobile browsers, with a PNG image in different shapes and transparency. I created drop shadow using a duplicate of the image. That means I have two img elements of the same image, one on top of the other (using position: absolute), and the one behind has the following rules applied to it:

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

This includes brightness filter in order to darken the bottom image, and a blur filter in order to cast the smudgy effect drop shadow usually has. Opacity at 50% is then applied in order to soften it.

This can be applied cross browser using moz and ms flags.

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

---

There's a proposed feature which you could use for arbitrarily shaped drop shadows. You could see it here, courtesy of Lea Verou:

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

Browser support is minimal, though.

---

This won't be possible with css - an image is a square, and so the shadow would be the shadow of a square. The easiest way would be to use photoshop/gimp or any other image editor to apply the shadow like core draw.

---

A trick I often use when I just need "a little" shadow (read: contour must not be super-precise) is placing a DIV with a radial fill 100%-black-to-100%-transparent under the image. The CSS for the DIV looks something like:

.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 */
  }

This will create a circular black faded-out 'dot' on a 320x320 DIV. If you scale the height or width of the DIV you get a corresponding oval. Very nice to create eg shadows under bottles or other cylinder-like shapes.

There is an absolute incredible, super-excellent tool to create CSS gradients here:

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

ps: Do a courtesy ad-click when you use it. (And, no,I'm not affiliated with it. But courtesy clicking should become a bit of a habit, especially for tool you use often... just sayin... since we're all working on the net...)

---

Maybe you are in search of this. http://lineandpixel.com/blog/png-shadow

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

---

You can't do this reliably across all browsers. Microsoft no longer supports DX filters as of IE10+, so none of the solutions here work fully:

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

The only property that works reliably across all browsers is box-shadow, and this just puts the border on your element (e.g. a div), resulting in a square border:

box-shadow: horizontalOffset verticalOffset blurDistance spreadDistance color inset;

e.g.

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

If you happen to have an image that is 'square' but with uniform rounded corners, the drop shadow works with border-radius, so you could always emulate the rounded corners of your image in your div.

Here's the Microsoft documentation for box-shadow:

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

참고URL : https://stackoverflow.com/questions/3186688/drop-shadow-for-png-image-in-css