it-swarm.com.de

Schlagschatten für PNG-Bilder in CSS

Ich habe ein PNG-Bild, das freie Form hat (nicht quadratisch).

Ich muss auf dieses Bild einen Schlagschatteneffekt anwenden.

Der Standardansatz ...

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

... zeigt Schatten für dieses Bild an, als wäre es ein Quadrat. Ich sehe also mein Bild und meinen quadratischen Schatten, der nicht der Form eines Objekts folgt und im Bild angezeigt wird.

Gibt es eine Möglichkeit, es richtig zu machen?

179
AntonAL

Ein bisschen zu spät zur Party, aber ja, es ist durchaus möglich, "echte" dynamische Schlagschatten um alpha-maskierte PNGs zu erstellen, indem eine Kombination aus Schlagschatten-Filter (für Webkit), SVG (für Firefox) und DX-Filter für IE verwendet wird.

.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>

Einige Vergleiche zwischen echtem Schlagschatten und Kastenschatten und ein Artikel über die soeben beschriebene Technik .

Ich hoffe das hilft!

244
Dudley Storey

Ja, es ist möglich, filter: dropShadow(x y blur? spread? color?) zu verwenden, entweder in CSS oder inline:

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);">
163
Abdul

Wenn Sie mehr als 100 Bilder haben, für die Sie Schlagschatten haben möchten, würde ich die Verwendung des Befehlszeilenprogramms ImageMagick empfehlen. Mit diesem Befehl können Sie geformte Schlagschatten auf 100 Bilder anwenden. Zum Beispiel:

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

Der obige Befehl (Shell) verwendet jede PNG-Datei im aktuellen Verzeichnis, wendet einen Schlagschatten an und speichert das Ergebnis im Verzeichnis shadow /. Wenn Sie die erzeugten Schlagschatten nicht mögen, können Sie die Parameter stark anpassen. Schauen Sie sich zunächst die Dokumentation für Schatten und die allgemeinen Gebrauchsanweisungen an. Dort finden Sie viele coole Beispiele, wie Sie Bilder bearbeiten können.

Wenn Sie sich in Zukunft etwas anderes über das Aussehen der Schlagschatten überlegen, ist es nur ein Befehl, neue Bilder mit anderen Parametern zu generieren :-)

37
psmears

Wie Dudley in seiner Antwort erwähnt hat, ist dies mit dem CSS-Filter für Schlagschatten für Webkits, SVG für Firefox und DirectX-Filtern für Internet Explorer 9- möglich.

Ein weiterer Schritt besteht darin, die SVG-Datei einzubinden und die zusätzliche Anforderung zu eliminieren:

.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')";
}
28
Karl Horky
img {
  -webkit-filter: drop-shadow(5px 5px 5px #222222);
  filter: drop-shadow(5px 5px 5px #222222);
}

Das hat bei mir sehr gut geklappt. Eine Sache zu beachten, dass in ei die Vollfarbe (# 222222) drei Zeichen nicht funktioniert.

19
Jaclyn U

Fügen Sie einen Rand mit Radius in Ihrer Klasse hinzu, wenn es sich um einen Block handelt. Denn standardmäßig wird der Schatten auf den Blockrand angewendet, auch wenn Ihr Bild eine abgerundete Ecke hat.

border-radius: 4px;

ändern Sie den Rahmenradius entsprechend Ihrer Bildecke. Ich hoffe das hilft.

17
anupal

Fügen Sie einfach Folgendes hinzu:

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

beispiel:

<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); 
}
10
Mahmoud Zalt

Hier ist ein fertiges Glow-Hover-Animationscode-Snippet dafür:

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

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

In meinem Fall musste es auf modernen mobilen Browsern funktionieren, mit einem PNG-Bild in verschiedenen Formen und Transparenz. Ich habe einen Schlagschatten mit einem Duplikat des Bildes erstellt. Das heißt, ich habe zwei img Elemente desselben Bildes übereinander (mit position: absolute) Und das dahinter stehende hat die folgenden Regeln:

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

Dazu gehören Helligkeitsfilter, um das untere Bild abzudunkeln, und ein Unschärfefilter, um den Effekt zu erzielen, den Schlagschatten normalerweise haben. Eine Deckkraft von 50% wird dann angewendet, um es zu erweichen.

Dies kann über die Flags moz und ms browserübergreifend angewendet werden.

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

2
ido

Als ich dies ursprünglich gepostet habe, war es nicht möglich, daher ist dies die Problemumgehung. Jetzt schlage ich einfach vor, andere Antworten zu verwenden.

Es gibt keine Möglichkeit, den Umriss des Bildes genau zu bestimmen, aber Sie können ihn mit einem Div hinter dem Bild in der Mitte vortäuschen.

Wenn mein Trick nicht funktioniert, musst du das Bild zerschneiden und es für jedes einzelne der kleinen Bilder tun. (je mehr Bilder, desto genauer der Schatten), aber für die meisten Bilder sieht es mit nur einem Bild in Ordnung aus.

was Sie tun müssen, ist, ein Wrap Div um Ihr Bild zu legen

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

dann steckst du einen leeren Teiler in die Hülle (dies wird als Schatten dienen)

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

und dann müssen Sie den Schatten mit CSS hinter dem Bild erscheinen lassen:

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

positionieren Sie nun das IMGWrap, um das Original-IMG zu positionieren. Um den Schatten des IMG zu zentrieren, können Sie mit den ersten beiden Werten des Box-Shadows experimentieren und sie negativ machen. Oder Sie positionieren das IMG und die Shadow Divs absolut img-Werte oben und links = 0 und die Shadow-Div-Werte = die Hälfte der Bildbreite bzw. -höhe.

Wenn das schrecklich aussieht, zerschneide dein Bild und versuche es erneut.

(Wenn Sie nicht möchten, dass der Schatten hinter dem Bild nur auf dem Umriss liegt, müssen Sie das Bild undurchsichtig machen und es so wirken lassen, als wäre es transparent, was nicht so schwer ist. Sie können dies kommentieren und ich werde es später erläutern.)

2
Xitcod13

Vielleicht suchen Sie danach. http://lineandpixel.com/blog/png-shadow

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

Mit CSS ist dies nicht möglich - ein Bild ist ein Quadrat, der Schatten wäre also der Schatten eines Quadrats. Am einfachsten wäre es, Photoshop/Gimp oder einen anderen Bildeditor zu verwenden, um den schattenähnlichen Kern zu zeichnen.

1
oezi

Dies ist nicht in allen Browsern zuverlässig möglich. Microsoft unterstützt ab IE10 + keine DX-Filter mehr, sodass keine der hier beschriebenen Lösungen vollständig funktioniert:

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

Die einzige Eigenschaft, die in allen Browsern zuverlässig funktioniert, ist box-shadow, und dies fügt nur den Rand Ihres Elements ein (z. B. ein Div), was zu einem quadratischen Rand führt:

box-Shadow: horizontalOffset verticalOffset blurDistance spreadDistance color inset;

z.B.

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

Wenn Sie ein Bild haben, das "quadratisch" ist, aber einheitlich abgerundete Ecken hat, funktioniert der Schlagschatten mit border-radius, so dass Sie immer die abgerundeten Ecken Ihres Bildes in Ihrem div emulieren können.

Hier ist die Microsoft-Dokumentation für box-shadow:

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

1
Chris Halcrow

Es gibt eine vorgeschlagene Funktion, die Sie für beliebig geformte Schlagschatten verwenden können. Sie können es hier mit freundlicher Genehmigung von Lea Verou sehen:

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

Die Browserunterstützung ist jedoch minimal.

1
avramov

Ein Trick, den ich oft benutze, wenn ich nur "einen kleinen" Schatten brauche (lesen Sie: Die Kontur muss nicht sehr genau sein), besteht darin, einen DIV mit einer radialen Füllung von 100% -schwarz bis 100% -transparent unter dem Bild zu platzieren. Das CSS für den DIV sieht ungefähr so ​​aus:

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

Dies erzeugt einen kreisförmigen schwarzen, ausgeblendeten Punkt auf einem 320x320 DIV. Wenn Sie die Höhe oder Breite des DIV skalieren, erhalten Sie ein entsprechendes Oval. Sehr schön um zB Schatten unter Flaschen oder andere zylinderähnliche Formen zu erzeugen.

Es gibt hier ein absolut unglaubliches, super-exzellentes Tool, um CSS-Verläufe zu erstellen:

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

ps: Machen Sie einen höflichen Werbeklick, wenn Sie ihn verwenden. (Und nein, ich bin nicht damit verbunden. Aber das Klicken mit freundlicher Genehmigung sollte eine Gewohnheit werden, besonders für Werkzeuge, die Sie oft benutzen ... nur sagen ... da wir alle am Netz arbeiten ... )

1
Rid Iculous