KOMPOOS.NL

multicolor letters

home » css » text-effects » multicolor-letters.html

sitemap

uitleg voor multi color tekst procedure

Om multicolor tekst op een pagina te plaatsen moet je een <strong> (of een tag, of een header) de class "multicolor_letters" geven. Een voorbeeld staat hieronder. Vergeet niet de "lege span" toe te voegen. Plaats de css-code in de head-sectie van jouw pagina om het effect te laten werken.

(voorbeeld) html voor de multicolor procedure

<h1><strong class="multicolor_letters">KOMPOOS.NL<span></span></strong></h1>

css code multicolor tekst

<style type="text/css">
	.multicolor_letters{
		color:#9f9;
		background:#a22;
		position:relative}
	.multicolor_letters:hover{
		color:#ffffaa;
		background-color:#a22}
	.multicolor_letters span{
		position:absolute;
		display:inline-block;
		top:0;
		left:0;
		height:55%;
		color:#fff;
		background-color:#22a;
		width:100%;
		filter:alpha(opacity=45);
		-moz-opacity:0.45;
		opacity:0.45}
</style>

Gebruik voor alle voorbeelden op de http://kompoos.nl een valide html5 pagina.