Gestern habe ich versucht, einen Text-Effekt, der mit text-shadow erzeugt wurde, mittels drop-shadow auf ein Bild mit Transparenzen anzuwenden. Zunächst scheiterte ich kläglich, denn er Effekt sah dem erwünschten Ergebnis kein bisschen ähnlich.
Es sollen mehrere Schatten gezeigt werden, die je ein Pixel weiter entfernt vom Text bzw. Bild geworfen werden.
Quelle für den Text-Effekt war folgende:
text-shadow:
    0 1px 0 #bbb,
    0 2px 0 #aaa,
    0 3px 0 #999,
    0 4px 0 #888,
    0 5px 0 #777,
    0 6px 0 #666
;


Folgendes zeigt den CSS-Code, der direkt dem text-shadow aus dem oberen Beispiel entspricht, und dessen Ergebnis fehlerhaft ist:
filter:
      drop-shadow(0 1px 0 #bbb)
      drop-shadow(0 2px 0 #aaa)
      drop-shadow(0 3px 0 #999)
      drop-shadow(0 4px 0 #888)
      drop-shadow(0 5px 0 #777)
      drop-shadow(0 6px 0 #666)
;

Die Lösung des Ganzen fiel mir dann kurz vorm Schlafengehen ein: Während text-shadow, welches mehrere Schatten-Werte in einem einzigen Kommando kennt, sich immer auf den Text bezieht, bezieht sich drop-shadow immer auf den Alpha-Kanal des kompletten vorangegangenen Bildes. Da dem CSS-Befehl filter mehrere drop-shadow gegeben werden können, von denen jeder nur Werte für einen einzigen Schattenwurf aufnehmen kann, bezieht sich der zweite drop-shadow somit vollständig auf den Alpha-Kanal des Bildes UND des ersten drop-shadow und so weiter. Dadurch ändert sich die Geometrie der folgenden Schatten, die je nur ein Pixel unter dem vorherigen Schatten erscheinen sollen. Ich lasse den jeweils nächsten drop-shadow also nicht je ein Pixel weiter entfernt zum Text, sondern nur ein einziges Pixel zum vorherigen drop-shadow zeichnen.

Hier nun das richtige Code und dessen Ergebnis:
filter:
      drop-shadow(0 1px 0 #bbb)
      drop-shadow(0 1px 0 #aaa)
      drop-shadow(0 1px 0 #999)
      drop-shadow(0 1px 0 #888)
      drop-shadow(0 1px 0 #777)
      drop-shadow(0 1px 0 #666)
;