Beispiel:CSS3 text-fill-color.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>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: 200%;
	top: 2em;
	left: 9em;
}

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>
	<h1><span id="eins">HTML</span><span id="zwei"> &amp; </span><span id="drei">CSS</span><span id="vier"> - eine Einführung</span></h1>
	<p> Lassen Sie (unterschiedliche) Größen wirken.</p>
</hgroup>
	
<div id="hinweis">
	<h3>Hinweis</h3>
	<p>Die Eigenschaften <code>-webkit-text-fill-color</code> und <code>-webkit-text-stroke</code>		sind nicht Teil der Spezifikation!</p>
	<p>Randlinien und Füllungen sollten mit SVG realisiert werden.</p>
	<h3>Siehe auch</h3>
	<p><a href="https://wiki.selfhtml.org/wiki/SVG/Tutorials/Text">Texteffekte mit SVG</a>(5-teiliger Kurs)</p>
</div>
</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS3_text-fill-color.html&oldid=92119“