Beispiel:SVG-text-filter-1.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Texteffekte mit CSS-Filter</title> <style> .blur { filter: blur(0.08em); font-size: 36px; } .schatten1 { filter: drop-shadow(1px 2px 0 black); }

.schatten2 { filter: drop-shadow(1px 2px 2px #333); }

.lighting { filter: drop-shadow(0 -1px 2px white); }

.glow { fill: #c82f04; 

 animation: svg-glow 2s  infinite alternate;

}

@keyframes svg-glow { 

 from {
   filter: drop-shadow( 0 0 0 #fff) drop-shadow( 0 0 0 pink) drop-shadow( 0 0 0 pink);

fill: #c82f04; 

 }

 to {
   fill: red;
   filter: drop-shadow( 0 0 1px hotpink) drop-shadow( 0 0 2px pink) drop-shadow( 0 0 5px white);
 }

}


.demo { fill: gold; stroke: steelBlue; }

text { font-size: 55px; font-family: sans-serif, Arial; 

 text-anchor: middle;

}

.code { 

 text-anchor: start;

font-size: 12px; font-family: monospace; }

body { 

 max-width: 50em;

background: #999; margin-inline: auto; }

</style> </head>

<body>

Texteffekte mit CSS-Filter

Dies ist eine Galerie von SVG-Beispielen, die mit dem text-Element und einer Gestaltung durch die CSS-filter-Eigenschaft realisiert wurden:

<svg viewBox="0 0 600 400">

<text x="10" y="50" class="code">filter: blur()</text> <text x="330" y="50" class="blur">Wo ist meine Brille?</text>

<text x="10" y="125" class="code">filter: drop-shadow()</text> <text x="350" y="125" class="demo schatten1">Schlagschatten</text>


<text x="10" y="200" class="code">filter: drop-shadow()</text> <g class="schatten2" fill="url(#rainbow)" transform="translate(270,200)"> 

   <text x="0" y="0">Farbig &</text>
   <text x="145" dy="50">Schattenwurf</text>

</g>

<text x="130" y="325" class="demo lighting"> Leuchten</text>

<text x="430" y="325" class="glow">Alpenglühen</text> 

 <defs>
   <linearGradient id="rainbow">
     <stop offset="0" stop-color="red"/>
     <stop offset=".25" stop-color="orange"/>
     <stop offset=".45" stop-color="yellow"/>
     <stop offset=".65" stop-color="green"/>
     <stop offset=".82" stop-color="blue"/>
     <stop offset="1" stop-color="purple"/>
   </linearGradient>

</defs> </svg>

</body> </html>

Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:SVG-text-filter-1.html&oldid=100025“