it-swarm.com.de

Können Sie PNG-Inhalten mit CSS einen nicht quadratischen Schlagschatten hinzufügen?

Ist es möglich, einen Schlagschatten auf den Inhalt eines PNG zu legen?

kein Quadrat, sondern ein Objekt, das Schatten wirft
wirkt sich auf den nicht transparenten Inhalt des PNG aus.

47
Kirk Strobeck

Es ist definitiv möglich.

nter Verwendung von Filtern sample:

img { 
    -webkit-filter: drop-shadow(5px 5px 5px #222);
    filter:         drop-shadow(5px 5px 5px #222); 
}
111
Slake

Das ist in CSS nicht möglich. Es ist zwar durchaus möglich, dies über eine Zeichenfläche zu tun, dies ist jedoch etwas ineffizient (da es jedes Mal vom Client verarbeitet wird) und JavaScript-abhängig. Dies im PNG zu tun ist einfacher und funktioniert in mehr Browsern.

Wenn Sie weitere Informationen dazu wünschen, durchsuchen Sie das Web nach Dingen wie "HTML-Canvas-Unschärfe" und "HTML-Canvas-Bild laden". Oder noch besser, verwenden Sie die Canvas Shadow-Funktion, die alles kann.

Hier ist ein Beispiel: http://philip.html5.org/demos/canvas/shadows/various.html

  • kontext aus leinwand erstellen
  • stellen Sie context.shadow(Color|OffsetX|OffsetY|Blur) wie gewünscht ein
  • lade PNG aus dem img Tag mit context.drawImage
  • ah! die Schatten!

Und ein Bonus:

  • verwenden context.toDataURL Wenn Sie nach PNG exportieren möchten (Erstellen Sie eine Web-App, in die Sie PNGs einfügen und die Ihnen Schatten spendet!)
19
Chris Morgan

Wie sich die Zeiten ändern. Es ist jetzt möglich in einigen Browsern , wie in der aktuell akzeptierten Antwort gezeigt.


Dies ist mit CSS nicht möglich:

Ich gehe davon aus, dass Sie danach fragen.

12
thirtydot

Bis es für CSS verfügbar ist, können Sie meinen Ansatz ausprobieren.

Mein Beispiel verwendet dieses Bild:

original image

weil es einen transparenten Hintergrund hat und nicht quadratisch ist (damit der Schatten von CSS in Aktion tritt). Es ist nicht sehr schick, aber dient dieser kleinen und einfachen Anleitung gut.

Der nächste Schritt, den ich unternahm, bestand darin, ein weiteres Bild zu erstellen, das auf dem obigen basiert und unter dem Original platziert wird.

Schritt 1. Unschärfe hinzufügen:

blurred original

Schritt 2. Licht und Kontrast entfernt:

the shadow

Ich habe also das Original und den Schatten.

Als nächstes zeige ich es an, als wäre es ein Schatten:

Stil:

.common {width: 100px;height: 100px;background-size: 100% 100%; position:absolute;}

.divOriginal {background-image: url(../img/original.png);top:2em;left:2em;z-index:10;}

.divShadow {background-image: url(../img/shadow.png);top: 3em;left: 2.5em;z-index:8;}

Mach die Magie:

Addiere ein Div und setze attribute class="divOriginal common "und eine andere mit class="divShadow common".

Das Ergebnis sollte sein:

result: pseudo-shadow

Prost!

Adi

6
AdiKonstantin

Ich habe ein jQuery-Plugin dafür geschrieben, basierend auf Chris Morgans Vorschlag über Canvas. Sie finden es auf GitHub hier: https://github.com/Kukunin/image-shadow

3
Kukunin

Verwenden Sie createjs Beispiel finden Sie unter JSFiddle

shadowTarget.shadow = shadow;

stage.addChild(shadowTarget);

shadowTarget.x = 500 / 2;
shadowTarget.y = 450 / 2;

shadowTarget.regX = shadowTarget.image.width/2;
shadowTarget.regY = shadowTarget.image.height/2;
1
Hoy Cheung