Schlagschatten für PNG-Bild in CSS

210

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?

AntonAL
quelle

Antworten:

261

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!

Dudley Storey
quelle
1
Noch später zur Party, aber +1 für die plattenübergreifende CSS- filterEigenschaft ... Obwohl ich nicht denke, dass HTML-SVG-Tags benötigt werden, wird jedes PNG mit Alpha-Kanal den Trick machen
Guillaume
2
Dudley Storey ist richtig. Ohne die SVG wird der Schatten in Firefox nicht angezeigt. @AntonAL könnte diese Antwort akzeptieren.
Javsmo
5
DX-Filter funktionieren im IE nicht mehr ... Gibt es eine neue Lösung für den IE? msdn.microsoft.com/en-us/library/hh801215(v=vs.85).aspx
tb11
2
In diesen Tagen Firefox unterstützt filter: drop-shadow(x y blur color); so die SVG Trick sollte nicht mehr nötig sein.
Raptor007
11
Können wir uns nicht alle einig sein, dass IE vor Jahren in den Müllhaufen geworfen werden sollte? Edge ist etwas besser, aber Holy Cow M $ Haben Sie die Softwareentwicklung mit IE gezielt in die dunklen Zeiten zurückversetzt? Was für ein Gräuel.
RyanNerd
216

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

Abdul
quelle
8
Keine IE-Unterstützung ... :(
CF
10
IE sollte mit der Zeit kommen: P
Bryant Jackson
6
-webkit-Filter ist nicht mehr erforderlich
Brett Donald
11
2019: Was ist IE? : P
evilReiko
36

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

psmears
quelle
22
Es ist zwar eine Lösung, beantwortet aber nicht die Frage!
Leo
6
Der Fragesteller versucht, den Browser den Schatten rendern zu lassen und keine Skripte auf dem Server auszuführen, die Schatten erzeugen können. Dies sind nützliche Informationen, aber nicht der gleiche Problembereich.
SG1
Einige Hinweise, damit dies funktioniert: 1. Sie müssen das Schattenverzeichnis erstellen, bevor Sie diesen Befehl ausführen (z. B. mit mkdir shadow). 2. Sollte $iin Anführungszeichen gesetzt werden (wie in "$i"), oder es wird erstickt, wenn ein Bild ein Leerzeichen in seinem Dateinamen hat:for i in *.png; do convert "$i" '(' +clone -background black -shadow 80x3+3+3 ')' +swap -background none -layers merge +repage shadow/"$i".png; done
Andrew Macheret
2
3. Die resultierenden Dateien werden benannt filename.png.png. Hier ist eine voll funktionsfähige Version:for i in *.png; do convert "$i" '(' +clone -background black -shadow 80x3+3+3 ')' +swap -background none -layers merge +repage shadow/"$i"; done
Andrew Macheret
@ AndrewMacheret: Gute Punkte - beachten Sie jedoch, dass dies eher ein Beispiel dafür ist, was getan werden kann, als ein voll funktionsfähiges Programm! Ich habe das doppelte .png-Suffix und die Anführungszeichen korrigiert. Das Verzeichnis, von dem ich glaube, dass es mir nur in die Quere kommt ...
psmears
34
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.

Jaclyn U.
quelle
29

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')";
}
Karl Horky
quelle
1
Es funktioniert gut .. besser als wenn ich die SVG in HTML-Tags definiere. (Firefox)
Oki Erie Rinaldi
18

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.

anupal
quelle
12

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

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));
Dmitry Kaigorodov
quelle
anders als Webkit?
mmm
3

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

Xitcod13
quelle
Als ich antwortete, war es nicht möglich, denke ich, jetzt ist es so. Die Zukunft ist da!
Xitcod13
2

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/

ich mache
quelle
1

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.

oezi
quelle
Danke für die Antwort. Aber das Hinzufügen von Bildern im Editor wird in Zukunft Probleme haben, wenn ich> 100 Bilder habe und die Schatten ein wenig optimieren sollte. Die beste Lösung für mein Problem besteht darin, mit jQuery unter jedem fraglichen Bild ein zusätzliches Schattenbild hinzuzufügen.
AntonAL
1

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

Iculous loswerden
quelle
Ich konnte sehen, dass dies ziemlich gut aussah, wenn es ein wenig modifiziert wurde
BeachInCalifornia.com
1
"Mit freundlicher Genehmigung von Ad-Click"? Ernsthaft, wie ist es eine gute Sache für das Internet, Werbetreibende abzureißen? Viele von uns sind selbst Werbetreibende oder werden von ihnen bezahlt. Daher ist es sehr unangenehm, für Werbetreibende Gebühren für Anzeigen für Produkte auszulösen, die Sie niemals kaufen werden. Wenn Sie an einer Anzeige interessiert sind, klicken Sie auf jeden Fall darauf, aber tun Sie dies nicht!
Alastair
Oh, geh weg von deiner moralischen Überlegenheit, Alastair. Die reale Welt sieht ein bisschen anders aus. "Werbetreibende abzocken"? "Ja wirklich?" LOL - Gib mir eine Pause, Mann. Ich bin seit fast 30 Jahren in Werbung und Marketing tätig. Das Platzieren des ungeraden Höflichkeitsklicks hat keinerlei Einfluss außer der Unterstützung der Websites, die Sie KOSTENLOS verwenden. Wenn Sie sich Sorgen über die Inflation von Preisen usw. machen, machen Sie sich Sorgen über die zunehmend monopolisierenden Trends in der gesamten Branche. Das ist es, was Werbepreise verzerrt, nicht das seltsame Klicken mit freundlicher Genehmigung.
Rid Iculous
Das sieht schrecklich aus auf FF und IE
Barrypicker
1

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

Chris Halcrow
quelle
Ich schätze die direkte Antwort. Keines der obigen Beispiele funktioniert für mich.
Barrypicker