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><h1>Texteffekte mit CSS-Filter</h1>
<p>Dies ist eine Galerie von SVG-Beispielen, die mit dem <code>text</code>-Element und einer Gestaltung durch die CSS-<code>filter</code>-Eigenschaft realisiert wurden:</p>

<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“