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?
quelle
filter
Eigenschaft ... Obwohl ich nicht denke, dass HTML-SVG-Tags benötigt werden, wird jedes PNG mit Alpha-Kanal den Trick machenfilter: drop-shadow(x y blur color);
so die SVG Trick sollte nicht mehr nötig sein.Ja, es ist möglich
filter: dropShadow(x y blur? spread? color?)
, entweder in CSS oder inline zu verwenden:quelle
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:
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 :-)
quelle
mkdir shadow
). 2. Sollte$i
in 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
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
Das hat bei mir super geklappt. Beachten Sie, dass Sie im IE die Vollfarbe benötigen (# 222222). Drei Zeichen funktionieren nicht.
quelle
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:
quelle
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.
quelle
Fügen Sie einfach Folgendes hinzu:
Beispiel:
quelle
Hier ist ein fertiges Glow-Hover-Animationscode-Snippet dafür:
http://codepen.io/widhi_allan/pen/ltaCq
quelle
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
dann legst du einen leeren Teiler in die Umhüllung (dies wird als Schatten dienen)
und dann müssen Sie den Schatten mit CSS hinter dem Bild erscheinen lassen:
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.)
quelle
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
img
Elemente desselben Bildes übereinander (mitposition: absolute
) und auf das dahinterliegende gelten die folgenden Regeln: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
moz
undms
Flags angewendet werden .Beispiel: https://jsfiddle.net/5mLssm7o/
quelle
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.
quelle
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.
quelle
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:
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 ... )
quelle
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
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
quelle
Vielleicht sind Sie auf der Suche danach. http://lineandpixel.com/blog/png-shadow
quelle