Beispiel:CSS3 filter-shadow.html
<!DOCTYPE html> <html lang="de"> <head>
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./Beispiel:Grundlayout.css">
<title>box-shadow vs filter: drop-shadow()</title> <style> .box-shadow {
box-shadow: 20px 20px 10px rgb(0 0 0 /0.4);
}
.drop-shadow-1 {
filter: drop-shadow(10px 10px 10px rgb(0 0 0 /0.4));
}
.drop-shadow-2 { filter: drop-shadow(10px 80px 0px rgb(0 0 0 /0.5)); }
figure {
text-align: center;
padding: .5em; margin: 0; }
img {
width: 100%; height: auto; background: rgb(255 255 255 / 0.1); border-radius: 0.5em;
}
body {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
gap: 1em;
}
h1,p {grid-column: 1 / -1;}
</style>
</head>
<body>
Verwendung von filter:drop-shadow()
<figure>
<img class="box-shadow" src="https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png" alt="Transparent PNG"> <figcaption>🔳box-shadow
Schatten um die Box herum, nicht die Form</figcaption>
</figure>
<figure>
<img class="drop-shadow-1" src="https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png" alt="Transparent PNG"> <figcaption>☁️filter: drop-shadow()
Der Schatten folgt der Form!</figcaption>
</figure> <figure> <svg xmlns="http://www.w3.org/2000/svg" viewBox="-80 -50 250 250" class="drop-shadow-2">
<g id="segelflieger"> <path id="rumpf" stroke="black" fill="white" d="m -51 1.5 l 1.5 -18 l -5.5 1 l -7 -0.5 l 33.5 -12 l 3 0.5 l -11.5 9 l 7 19 l 76.5 4.5 l 38.5 -25 l 14.5 -18 l 6 -0.5 l -8.5 18.5 l -31 25 c 24.5 3 48 16.5 46.5 20.5 c -2 4.5 -43.5 2 -65.5 -5.5 l -49.5 23.5 l -33.5 4.5 l -5.5 -1.5 l 25.5 -6.5 l 45.5 -25.5 l -80.5 -1.5 z" />
<g id="linien" stroke="black" fill="none"> <polyline points="-49.5,-17 -37.5,-19" /> <path d="m 29 15.5 l 3 -1.5 c 11 -4 25 0.5 23 2.5 l -5.5 2.5" /> <polyline points="84.5,-20 96.5,-19" /> <polyline points="-16.5,41 -3,44.5" /> <polyline points="46,4.5 65.5,6" /> <path d="m 68.5,6.5 c -6.5,0 -10.5,10.5 -4.5,11.5 c 13.5,2 26.5,4.5 26.5,4.5 c -0.5,-2 1.5,-7 5,-6.5" /> </g>
</g>
</svg>
<figcaption>filter: drop-shadow(10px 60px 0 rgb(0 0 0 /0.5));</figcaption>
</figure>
<figure>
<img class="box-shadow" src="https://wiki.selfhtml.org/images/2/2e/Flugzeug.svg" alt="Flugzeug" >
<figcaption> box-shadow: 20px 20px 10px rgb(0 0 0 /0.4); </figcaption>
</figure>
<figure>
<img class="drop-shadow-1" src="https://wiki.selfhtml.org/images/2/2e/Flugzeug.svg" alt="Flugzeug" >
<figcaption>filter: drop-shadow(10px 10px 10px rgb(0 0 0 /0.4); </figcaption>
</figure>
<figure>
<img class="drop-shadow-2" src="https://wiki.selfhtml.org/images/2/2e/Flugzeug.svg" alt="Flugzeug" >
<figcaption>filteR: drop-shadow(10px 60px 0 rgb(0 0 0 /0.5)); </figcaption>
</figure>
box-shadow kennt keine Alpha-Transparenz in Bildern oder SVG-Formen – es wird der Begrenzungsrahmen des Elements schattiert, nicht dessen sichtbarer Umriss.
filter: drop-shadow() wird auf die gerenderten Pixel angewendet – das bedeutet, dass die sichtbaren Teile des Elements einschließlich der Transparenz berücksichtigt werden.
</body> </html>
