Beispiel:CSS3 text-shadow-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>Textschatten</title>
<style>
h1 {
	font: bold 7.5cqw Helvetica, Arial, Sans-Serif;
	color: white;
	padding: 0.2em;    
}

#eins {
    font-size: 6.9cqw;
	text-transform: uppercase;   
	text-shadow: 1px 1px 1px black, 1px -1px 1px black, -1px 1px 1px black, -1px -1px 1px black;
}

#eins span {
	color: red;
	display: inline-block;
	transform: translate(0, -0.3em) rotate(-10deg) scale(1, 1.5);
	width: 1.5ch;
	height: 1em;
	margin: 0;
	padding: 0;

}


#zwei {
	text-shadow: 0 0 5px black;
}

code {
text-transform: lowercase;  
}



#gelb {
	font-family: Chewy;
	color: yellow;
	letter-spacing: 0.1em;
	text-shadow: 1px 1px 1px black, 1px -1px 1px black, -1px 1px 1px black, -1px -1px 1px black;
}

#gelb::first-letter {
	color: lime;
}

main {
	border: thin dotted;
	container-type: inline-size;
	overflow: auto; 	/* overflow is needed */
	resize: horizontal;
	width: 95%;	
}
</style>
</head>

<body>
<main contenteditable>
	<h1 id="gelb">Gelb auf weiß? - Geht!</h1>
	<h1 id="eins">K<span>o</span>ntr<span>a</span>st mit <code>text-shadow</code></h1>
	<h1 id="zwei">Randlinien und Schatten</h1>

</main>
</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS3_text-shadow-1_.html&oldid=92120“