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 170" class="drop-shadow-2">
<g id="segelflieger"> <path id="rumpf" stroke="black" fill="white" d="M -50 2 L -49 -17 L -54 -16 L -62 -16 L -28 -28 L -25 -28 L -37 -19 L -30 0 L 47 5 L 85 -20 L 100 -38 L 106 -37 L 97 -19 L 66 7 C 91 10 114 24 113 27 C 111 32 69 29 47 22 L -2 45 L -36 50 L -41 48 L -16 42 L 30 16 L -50 2 Z"/> <path id="linien" stroke="black" fill="none" d="M -49 -17 L -37 -19 M 30 16 L 33 15 C 44 11 55 17 53 19 L 47 22 M 85 -20 L 97 -19 M -16 42 L -2 45 M 47 5 L 66 7 M 68 7 C 62 7 59 18 65 19 C 79 21 96 23 96 23 C 95 21 97 16 100 17"/> </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>
