Beispiel:CSS3 text-fill-color.html
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Text mit Füllung und Rand</title>
<style>
h1 { font-size: 3.5cqw; font-family: georgia, 'Comic Sans', serif; font-weight: normal; margin-bottom: 10em; }
- eins {
font-size: 400%; top: 0; left: 0;
-webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke: 1px black; background-image: linear-gradient( to right, red, orange, yellow, green, blue, indigo, violet);
}
- zwei {
font-size: 800%; top: -0.1em; left: 1.5em; }
- drei {
font-size: 400%; top: 0em; right: .25em;
-webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke: 1px black; background-image: linear-gradient( red, red, orange, yellow, yellow);
}
#vier {
font-size: 170%;
top: 2.5em;
left: 10em;
}
hgroup { position: relative;
font-family: Garamond, serif;
margin-bottom: 4em; border: thin dotted; container-type: inline-size; overflow: auto; /* overflow is needed */ resize: horizontal; width: 95%; } hgroup span { position: absolute; }
</style> </head> <body> <hgroup contenteditable>
HTML & CSS - eine Einführung
Lassen Sie (unterschiedliche) Größen wirken.
</hgroup>
Hinweis
Die Eigenschaften -webkit-text-fill-color und -webkit-text-stroke sind nicht Teil der Spezifikation!
Randlinien und Füllungen sollten mit SVG realisiert werden.
Siehe auch
<a href="https://wiki.selfhtml.org/wiki/SVG/Tutorials/Text">Texteffekte mit SVG</a>(5-teiliger Kurs)
</body> </html>
