Schlagschatten für PNG-Bild in CSS

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

Ich muss einen Schlagschatteneffekt auf dieses Bild 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?

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 Dropshadow-Filter (für Webkit), SVG (für Firefox) und DX-Filtern 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 Technik, die ich gerade beschrieben habe .

Ich hoffe das hilft!

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

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

Wenn Sie> 100 Bilder haben, für die Sie Schlagschatten haben möchten, würde ich die Verwendung des Befehlszeilenprogramms ImageMagick empfehlen . Mit dieser Funktion können Sie 100 Bildern mit nur einem Befehl geformte Schlagschatten zuweisen! Beispielsweise:

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 Ihnen die erzeugten Schlagschatten nicht gefallen, können Sie die Parameter häufig anpassen. Schauen Sie sich zunächst die Dokumentation für Schatten an . In den allgemeinen Gebrauchsanweisungen finden Sie viele coole Beispiele für Dinge, die mit Bildern gemacht werden können.

Wenn Sie in Zukunft Ihre Meinung über das Aussehen der Schlagschatten ändern, ist dies nur ein Befehl, um neue Bilder mit unterschiedlichen Parametern zu generieren :-)

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

Das hat bei mir super geklappt. Beachten Sie, dass Sie im IE die Vollfarbe benötigen (# 222222). Drei Zeichen funktionieren nicht.

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

Ein weiterer Schritt besteht darin, die SVG zu integrieren 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')";
}

Fügen Sie in Ihrer Klasse einen Rahmen mit Radius hinzu, wenn es sich um einen Block handelt. weil standardmäßig Schatten auf den Blockrand angewendet werden, selbst wenn Ihr Bild eine abgerundete Ecke hat.

border-radius: 4px;

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

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

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

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 erhalten, aber Sie können ihn mit einem Div hinter dem Bild in der Mitte fälschen.

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

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

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

dann legst du einen leeren Teiler in die Umhüllung (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 ursprüngliche img zu positionieren ... um den Schatten des img zu zentrieren, können Sie mit den ersten beiden Werten des Box-Schattens herumspielen und sie negativ machen ... oder Sie können das img und die Schatten-Divs absolut positionieren Machen Sie img obere und linke Werte = 0 und die Schatten-Div-Werte = die Hälfte der img Breite bzw. Höhe.

Wenn dies schrecklich aussieht, schneiden Sie Ihr Bild ab und versuchen Sie es erneut.

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

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

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

Dies umfasst einen Helligkeitsfilter, um das untere Bild abzudunkeln, und einen Unschärfefilter, um den Schlagschatten mit schmutzigem Effekt zu erzeugen, der normalerweise auftritt. Eine Deckkraft von 50% wird dann angewendet, um es zu erweichen.

Dies kann browserübergreifend mit mozund msFlags angewendet werden .

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

Es gibt eine vorgeschlagene Funktion, die Sie für beliebig geformte Schlagschatten verwenden können. Sie konnten 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.

Dies ist mit CSS nicht möglich - ein Bild ist ein Quadrat, und daher wäre der Schatten der Schatten eines Quadrats. Der einfachste Weg wäre, Photoshop / Gimp oder einen anderen Bildeditor zu verwenden, um die schattenähnliche Kernzeichnung anzuwenden.

Ein Trick, den ich oft verwende, wenn ich nur "einen kleinen" Schatten brauche (sprich: Kontur darf nicht sehr präzise sein), ist das Platzieren eines DIV mit einer radialen Füllung von 100% -schwarz bis 100% -transparent unter dem Bild. 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 */
  }

Dadurch wird auf einem 320 x 320 DIV ein kreisförmiger schwarzer, ausgeblendeter Punkt erzeugt. Wenn Sie die Höhe oder Breite des DIV skalieren, erhalten Sie ein entsprechendes Oval. Sehr schön, zB Schatten unter Flaschen oder anderen zylinderartigen Formen zu erzeugen.

Hier gibt es ein absolut unglaubliches, hervorragendes Tool zum Erstellen von CSS-Verläufen:

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

ps: Machen Sie einen Höflichkeits-Klick, wenn Sie es verwenden. (Und nein, ich bin nicht damit verbunden. Aber das Klicken mit freundlicher Genehmigung sollte zur Gewohnheit werden, insbesondere für Tools, die Sie häufig verwenden ... sagen Sie einfach ... da wir alle am Netz arbeiten ... )

Sie können dies nicht in allen Browsern zuverlässig tun. Microsoft unterstützt ab IE10 + keine DX-Filter mehr, daher funktioniert keine der hier aufgeführten Lösungen vollständig:

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 setzt nur den Rand Ihres Elements (z. B. ein div), was zu einem quadratischen Rand führt:

Kastenschatten: horizontalOffset vertikalOffset UnschärfeDistanzverteilungDistanzfarbeinsatz ;

z.B

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

Wenn Sie zufällig ein Bild haben, das "quadratisch" ist, aber gleichmäßig abgerundete Ecken aufweist, arbeitet der Schlagschatten mit border-radius, sodass Sie die abgerundeten Ecken Ihres Bildes in Ihrem Div immer emulieren können.

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

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

Vielleicht sind Sie auf der Suche danach. http://lineandpixel.com/blog/png-shadow

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